@marimo-team/islands 0.24.3-dev3 → 0.24.3-dev30

package/src/core/packages/__tests__/useInstallPackage.test.tsx

@@ -1,10 +1,22 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { act, renderHook } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+} from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { useInstallPackages } from "../useInstallPackage";
+import { Toast, ToastProvider, ToastViewport } from "@/components/ui/toast";
 
 const toast = vi.fn();
 const addPackage = vi.fn();
+const restartKernel = vi.fn();
+
+vi.mock("@/components/editor/actions/useRestartKernel", () => ({
+  useRestartKernel: () => restartKernel,
+}));
 
 vi.mock("@/components/ui/use-toast", () => ({
   toast: (...args: unknown[]) => toast(...args),
@@ -20,6 +32,7 @@ describe("useInstallPackages", () => {
   beforeEach(() => {
     toast.mockClear();
     addPackage.mockClear();
+    restartKernel.mockClear();
   });
 
   it("batches all packages into a single install call", async () => {
@@ -109,6 +122,39 @@ describe("useInstallPackages", () => {
     );
   });
 
+  it("reports saved changes requiring restart without claiming installation", async () => {
+    addPackage.mockResolvedValue({
+      success: false,
+      error: null,
+      restartRequired: true,
+    });
+    const { result } = renderHook(() => useInstallPackages());
+    await act(async () => {
+      await result.current.handleInstallPackages(["boltons", "six"]);
+    });
+    expect(toast).toHaveBeenCalledTimes(1);
+    expect(toast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Changes saved — restart required",
+        description: expect.stringContaining(
+          "Restarting clears in-memory variables",
+        ),
+        duration: Infinity,
+        action: expect.anything(),
+      }),
+    );
+    expect(toast.mock.calls[0][0].variant).not.toBe("danger");
+    render(
+      <ToastProvider>
+        <Toast>{toast.mock.calls[0][0].action}</Toast>
+        <ToastViewport />
+      </ToastProvider>,
+    );
+    expect(restartKernel).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole("button", { name: "Restart Kernel" }));
+    expect(restartKernel).toHaveBeenCalledTimes(1);
+  });
+
   it("calls onSuccess after a successful install", async () => {
     addPackage.mockResolvedValue({ success: true, error: null });
     const onSuccess = vi.fn();

package/src/core/packages/toast-components.tsx

@@ -1,8 +1,34 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { useRestartKernel } from "@/components/editor/actions/useRestartKernel";
 import { Kbd } from "@/components/ui/kbd";
+import { ToastAction } from "@/components/ui/toast";
 import { toast } from "@/components/ui/use-toast";
 
+export const RESTART_REQUIRED_DESCRIPTION =
+  "Your dependency changes are saved. Restart the kernel to use the updated environment. Restarting clears in-memory variables.";
+
+const RestartKernelAction = () => {
+  const restartKernel = useRestartKernel();
+  return (
+    <ToastAction
+      altText="Restart the kernel to use the updated dependencies"
+      onClick={restartKernel}
+    >
+      Restart Kernel
+    </ToastAction>
+  );
+};
+
+export const showPackageRestartToast = () => {
+  toast({
+    title: "Changes saved — restart required",
+    description: RESTART_REQUIRED_DESCRIPTION,
+    duration: Infinity,
+    action: <RestartKernelAction />,
+  });
+};
+
 export const showAddPackageToast = (
   packageName: string | string[],
   error?: string | null,

package/src/core/packages/useInstallPackage.ts

@@ -3,7 +3,10 @@
 import { useState } from "react";
 import { Logger } from "@/utils/Logger";
 import { useRequestClient } from "../network/requests";
-import { showAddPackageToast } from "./toast-components";
+import {
+  showAddPackageToast,
+  showPackageRestartToast,
+} from "./toast-components";
 
 export function useInstallPackages(): {
   handleInstallPackages: (
@@ -30,7 +33,9 @@ export function useInstallPackages(): {
       // response only carries an aggregate success/error. Report a single
       // toast covering all requested packages rather than implying a
       // per-package outcome we don't actually have.
-      if (response.success) {
+      if (response.restartRequired) {
+        showPackageRestartToast();
+      } else if (response.success) {
         showAddPackageToast(packages);
       } else {
         showAddPackageToast(packages, response.error);

package/src/core/runtime/__tests__/runtime.test.ts

@@ -276,6 +276,17 @@ describe("RuntimeManager", () => {
   });
 
   describe("getTerminalWsURL", () => {
+    it("should include dimensions in the terminal handshake", () => {
+      const runtime = new RuntimeManager(mockConfig);
+      const url = runtime.getTerminalWsURL({ rows: 30, cols: 140 });
+
+      expect(Object.fromEntries(url.searchParams)).toEqual({
+        access_token: "test-token",
+        rows: "30",
+        cols: "140",
+      });
+    });
+
     it("should return terminal WebSocket URL", () => {
       const runtime = new RuntimeManager(mockConfig);
       const url = runtime.getTerminalWsURL();

package/src/core/runtime/runtime.ts

@@ -183,8 +183,13 @@ export class RuntimeManager {
   /**
    * The WebSocket URL of the terminal.
    */
-  getTerminalWsURL(): URL {
-    return this.formatWsURL("/terminal/ws");
+  getTerminalWsURL(size?: { rows: number; cols: number }): URL {
+    const url = this.formatWsURL("/terminal/ws");
+    if (size) {
+      url.searchParams.set("rows", String(size.rows));
+      url.searchParams.set("cols", String(size.cols));
+    }
+    return url;
   }
 
   /**

package/src/core/wasm/bridge.ts

@@ -649,6 +649,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
         tags: [],
         version: null,
       },
+      context: { kind: "package-manager", name: "micropip" },
     };
   };
 

package/src/core/websocket/transports/transport.ts

@@ -15,7 +15,7 @@ export type ConnectionTransportCallback<T extends ConnectionEvent> = (
 export interface IConnectionTransport {
   reconnect(code?: number | undefined, reason?: string | undefined): void;
   close(): void;
-  send(data: string | ArrayBuffer | Blob | ArrayBufferView): void;
+  send(data: string | ArrayBuffer | Blob | ArrayBufferView<ArrayBuffer>): void;
   addEventListener<T extends ConnectionEvent>(
     event: T,
     callback: ConnectionTransportCallback<T>,

package/src/core/websocket/transports/ws.ts

@@ -42,7 +42,7 @@ export class WsTransport implements IConnectionTransport {
     this.inner.close();
   }
 
-  send(data: string | ArrayBuffer | Blob | ArrayBufferView): void {
+  send(data: string | ArrayBuffer | Blob | ArrayBufferView<ArrayBuffer>): void {
     this.inner.send(data);
   }
 

package/src/css/app/Cell.css

@@ -82,6 +82,7 @@
     .console-output-area {
       max-height: 610px;
       overflow: auto;
+      overscroll-behavior: contain;
     }
 
     /* Special case for particular components */
@@ -521,6 +522,7 @@
   display: flow-root;
 
   overflow: auto;
+  overscroll-behavior: contain;
 }
 
 .marimo-output-stale,

package/src/plugins/core/RenderHTML.tsx

@@ -262,9 +262,29 @@ const wrapTooltipTargets: TransformFn = (
     if (tagName.startsWith("marimo-")) {
       return undefined;
     }
-    const tooltipContent = domNode.attribs["data-tooltip"];
+    const tooltipContent = domNode.attribs["data-tooltip"].replace(
+      /^[\r\n]+|[\r\n]+$/g,
+      "",
+    );
     return (
-      <Tooltip content={tooltipContent}>{reactNode as JSX.Element}</Tooltip>
+      <Tooltip
+        content={
+          tooltipContent.includes("\n") ? (
+            <span className="whitespace-pre-wrap">
+              {tooltipContent.split(/\r?\n/).map((line, i) => (
+                <React.Fragment key={i}>
+                  {i > 0 && <br />}
+                  {line}
+                </React.Fragment>
+              ))}
+            </span>
+          ) : (
+            tooltipContent
+          )
+        }
+      >
+        {reactNode as JSX.Element}
+      </Tooltip>
     );
   }
 };

package/src/plugins/core/__test__/RenderHTML.test.ts

@@ -1,5 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { ExtractAtomValue } from "jotai";
+import { isValidElement, type ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
 import { afterEach, beforeEach, describe, expect, test } from "vitest";
 import { hasRunAnyCellAtom } from "@/components/editor/cell/useRunCells";
 import { userConfigAtom } from "@/core/config/config";
@@ -450,6 +452,191 @@ describe("wrapTooltipTargets", () => {
       </Tooltip>
     `);
   });
+
+  test("data-tooltip multiline via &#10; entity renders <br/>", () => {
+    const html =
+      '<span data-tooltip="Line A&#10;Line B&#10;Line C">hover</span>';
+    const result = parseHtml({ html });
+    expect(result).toMatchInlineSnapshot(`
+      <Tooltip
+        content={
+          <span
+            className="whitespace-pre-wrap"
+          >
+            <React.Fragment>
+              Line A
+            </React.Fragment>
+            <React.Fragment>
+              <br />
+              Line B
+            </React.Fragment>
+            <React.Fragment>
+              <br />
+              Line C
+            </React.Fragment>
+          </span>
+        }
+      >
+        <span
+          data-tooltip="Line A
+      Line B
+      Line C"
+        >
+          hover
+        </span>
+      </Tooltip>
+    `);
+  });
+
+  test("data-tooltip multiline via literal \\n renders <br/>", () => {
+    const html = '<span data-tooltip="Line A\nLine B">hover</span>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <Tooltip
+        content={
+          <span
+            className="whitespace-pre-wrap"
+          >
+            <React.Fragment>
+              Line A
+            </React.Fragment>
+            <React.Fragment>
+              <br />
+              Line B
+            </React.Fragment>
+          </span>
+        }
+      >
+        <span
+          data-tooltip="Line A
+      Line B"
+        >
+          hover
+        </span>
+      </Tooltip>
+    `);
+  });
+
+  test("data-tooltip single line still works as before", () => {
+    const html = '<span data-tooltip="Single line">hover</span>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <Tooltip
+        content="Single line"
+      >
+        <span
+          data-tooltip="Single line"
+        >
+          hover
+        </span>
+      </Tooltip>
+    `);
+  });
+
+  test.each([
+    ["CRLF", "A\r\nB", '<span class="whitespace-pre-wrap">A<br/>B</span>'],
+    [
+      "encoded CRLF",
+      "A&#13;&#10;B",
+      '<span class="whitespace-pre-wrap">A<br/>B</span>',
+    ],
+    ["leading newline", "\nA", "A"],
+    ["trailing newline", "A\n", "A"],
+    [
+      "boundary newlines",
+      "\n\nA\nB\n\n",
+      '<span class="whitespace-pre-wrap">A<br/>B</span>',
+    ],
+    [
+      "boundary CRLF",
+      "&#13;&#10;A&#13;&#10;B&#13;&#10;",
+      '<span class="whitespace-pre-wrap">A<br/>B</span>',
+    ],
+    ["only newlines", "\n\n", ""],
+    ["only CRLF", "&#13;&#10;&#13;&#10;", ""],
+    [
+      "internal blank line",
+      "A\n\nB",
+      '<span class="whitespace-pre-wrap">A<br/><br/>B</span>',
+    ],
+    [
+      "spaces and tabs",
+      "\n A\t\n\tB \n",
+      '<span class="whitespace-pre-wrap"> A\t<br/>\tB </span>',
+    ],
+    [
+      "HTML text",
+      "&lt;b&gt;A&lt;/b&gt;\nB",
+      '<span class="whitespace-pre-wrap">&lt;b&gt;A&lt;/b&gt;<br/>B</span>',
+    ],
+  ])("data-tooltip handles %s", (_, content, expected) => {
+    const result = parseHtml({
+      html: `<span data-tooltip="${content}">Hover me</span>`,
+    });
+    if (!isValidElement<{ content: ReactNode }>(result)) {
+      throw new Error("Expected a Tooltip element");
+    }
+    expect(renderToStaticMarkup(result.props.content)).toBe(expected);
+  });
+
+  test("data-tooltip with newline renders as line breaks", () => {
+    const html = '<span data-tooltip="Line one\nLine two">Hover me</span>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <Tooltip
+        content={
+          <span
+            className="whitespace-pre-wrap"
+          >
+            <React.Fragment>
+              Line one
+            </React.Fragment>
+            <React.Fragment>
+              <br />
+              Line two
+            </React.Fragment>
+          </span>
+        }
+      >
+        <span
+          data-tooltip="Line one
+      Line two"
+        >
+          Hover me
+        </span>
+      </Tooltip>
+    `);
+  });
+
+  test("data-tooltip with multiple newlines renders all as line breaks", () => {
+    const html = '<span data-tooltip="A\nB\nC">Hover me</span>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <Tooltip
+        content={
+          <span
+            className="whitespace-pre-wrap"
+          >
+            <React.Fragment>
+              A
+            </React.Fragment>
+            <React.Fragment>
+              <br />
+              B
+            </React.Fragment>
+            <React.Fragment>
+              <br />
+              C
+            </React.Fragment>
+          </span>
+        }
+      >
+        <span
+          data-tooltip="A
+      B
+      C"
+        >
+          Hover me
+        </span>
+      </Tooltip>
+    `);
+  });
 });
 
 describe("parseHtml with < nad >", () => {

package/src/plugins/layout/AccordionPlugin.tsx

@@ -23,6 +23,7 @@ interface Data {
    * Whether to allow multiple tabs to be open.
    */
   multiple: boolean;
+  expanded: string[];
 }
 
 export class AccordionPlugin implements IStatelessPlugin<Data> {
@@ -31,6 +32,7 @@ export class AccordionPlugin implements IStatelessPlugin<Data> {
   validator = z.object({
     labels: z.array(z.string()),
     multiple: z.boolean(),
+    expanded: z.array(z.string()).default([]),
   });
 
   render(props: IStatelessPluginProps<Data>): JSX.Element {
@@ -43,11 +45,14 @@ export class AccordionPlugin implements IStatelessPlugin<Data> {
 const AccordionComponent = ({
   labels,
   multiple,
+  expanded,
   children,
 }: PropsWithChildren<Data>): JSX.Element => {
-  const type = multiple ? "multiple" : "single";
+  const expansionProps = multiple
+    ? { type: "multiple" as const, defaultValue: expanded }
+    : { type: "single" as const, defaultValue: expanded[0], collapsible: true };
   return (
-    <Accordion type={type} className="text-muted-foreground" collapsible={true}>
+    <Accordion {...expansionProps} className="text-muted-foreground">
       {React.Children.map(children, (child, index) => {
         return (
           <AccordionItem key={index} value={index.toString()}>

package/src/plugins/layout/__test__/AccordionPlugin.test.tsx

@@ -0,0 +1,66 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { AccordionPlugin } from "../AccordionPlugin";
+
+const plugin = new AccordionPlugin();
+
+function renderAccordion(multiple: boolean, expanded?: string[]) {
+  return plugin.render({
+    host: document.createElement("marimo-accordion"),
+    data: plugin.validator.parse({
+      labels: ["Summary", "Details"],
+      multiple,
+      expanded,
+    }),
+    children: [
+      <p key="summary">Overview</p>,
+      <p key="details">More information</p>,
+    ],
+  });
+}
+
+describe("AccordionPlugin", () => {
+  afterEach(cleanup);
+
+  it.each([
+    { multiple: false, expanded: undefined, expected: ["false", "false"] },
+    { multiple: true, expanded: [], expected: ["false", "false"] },
+    { multiple: false, expanded: ["0"], expected: ["true", "false"] },
+    { multiple: false, expanded: ["1"], expected: ["false", "true"] },
+    { multiple: true, expanded: ["0", "1"], expected: ["true", "true"] },
+  ])(
+    "sets initial expansion: $multiple, $expanded",
+    ({ multiple, expanded, expected }) => {
+      const { getAllByRole } = render(renderAccordion(multiple, expanded));
+      expect(
+        getAllByRole("button").map((button) =>
+          button.getAttribute("aria-expanded"),
+        ),
+      ).toEqual(expected);
+    },
+  );
+
+  it("lets users collapse and switch the initially expanded item", () => {
+    const { getAllByRole, rerender } = render(renderAccordion(false, ["1"]));
+    const [summary, details] = getAllByRole("button");
+    fireEvent.click(details);
+    expect(details.getAttribute("aria-expanded")).toBe("false");
+    rerender(renderAccordion(false, ["1"]));
+    expect(details.getAttribute("aria-expanded")).toBe("false");
+    fireEvent.click(details);
+    fireEvent.click(summary);
+    expect(
+      [summary, details].map((button) => button.getAttribute("aria-expanded")),
+    ).toEqual(["true", "false"]);
+  });
+
+  it("lets users collapse items independently with multiple enabled", () => {
+    const { getAllByRole } = render(renderAccordion(true, ["0", "1"]));
+    const [summary, details] = getAllByRole("button");
+    fireEvent.click(summary);
+    expect(
+      [summary, details].map((button) => button.getAttribute("aria-expanded")),
+    ).toEqual(["false", "true"]);
+  });
+});

package/dist/_baseMerge-Dv8bBloN.js

@@ -1,73 +0,0 @@
-import { A as e, E as t, O as n, _ as r, b as i, f as a, h as o, i as s, j as c, k as l, l as u, n as d, p as f, t as p, y as m } from "./isArrayLikeObject-BZl-15ir.js";
-import { a as h, i as g, l as _, n as v, o as y, s as b, t as x, u as S } from "./_initCloneObject---vediN2.js";
-//#region ../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/_isIterateeCall.js
-function C(e, t, r) {
-	if (!n(r)) return !1;
-	var a = typeof t;
-	return (a == "number" ? o(r) && i(t, r.length) : a == "string" && t in r) ? m(r[t], e) : !1;
-}
-//#endregion
-//#region ../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/_createAssigner.js
-function w(e) {
-	return r(function(t, n) {
-		var r = -1, i = n.length, a = i > 1 ? n[i - 1] : void 0, o = i > 2 ? n[2] : void 0;
-		for (a = e.length > 3 && typeof a == "function" ? (i--, a) : void 0, o && C(n[0], n[1], o) && (a = i < 3 ? void 0 : a, i = 1), t = Object(t); ++r < i;) {
-			var s = n[r];
-			s && e(t, s, r, a);
-		}
-		return t;
-	});
-}
-//#endregion
-//#region ../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/isPlainObject.js
-var T = "[object Object]", E = Function.prototype, D = Object.prototype, O = E.toString, k = D.hasOwnProperty, A = O.call(Object);
-function j(t) {
-	if (!e(t) || c(t) != T) return !1;
-	var n = h(t);
-	if (n === null) return !0;
-	var r = k.call(n, "constructor") && n.constructor;
-	return typeof r == "function" && r instanceof r && O.call(r) == A;
-}
-//#endregion
-//#region ../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/_assignMergeValue.js
-function M(e, t, n) {
-	(n !== void 0 && !m(e[t], n) || n === void 0 && !(t in e)) && _(e, t, n);
-}
-//#endregion
-//#region ../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/_safeGet.js
-function N(e, t) {
-	if ((t !== "constructor" || typeof e[t] != "function") && t != "__proto__") return e[t];
-}
-//#endregion
-//#region ../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/toPlainObject.js
-function P(e) {
-	return b(e, y(e));
-}
-//#endregion
-//#region ../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/_baseMergeDeep.js
-function F(e, r, i, o, s, c, d) {
-	var m = N(e, i), h = N(r, i), _ = d.get(h);
-	if (_) {
-		M(e, i, _);
-		return;
-	}
-	var y = c ? c(m, h, i + "", e, r, d) : void 0, b = y === void 0;
-	if (b) {
-		var C = l(h), w = !C && a(h), T = !C && !w && u(h);
-		y = h, C || w || T ? l(m) ? y = m : p(m) ? y = S(m) : w ? (b = !1, y = g(h, !0)) : T ? (b = !1, y = v(h, !0)) : y = [] : j(h) || f(h) ? (y = m, f(m) ? y = P(m) : (!n(m) || t(m)) && (y = x(h))) : b = !1;
-	}
-	b && (d.set(h, y), s(y, h, o, c, d), d.delete(h)), M(e, i, y);
-}
-//#endregion
-//#region ../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/_baseMerge.js
-function I(e, t, r, i, a) {
-	e !== t && d(t, function(o, c) {
-		if (a ||= new s(), n(o)) F(e, t, c, r, I, i, a);
-		else {
-			var l = i ? i(N(e, c), o, c + "", e, t, a) : void 0;
-			l === void 0 && (l = o), M(e, c, l);
-		}
-	}, y);
-}
-//#endregion
-export { w as n, C as r, I as t };