@marimo-team/islands 0.24.3-dev5 → 0.24.3-dev50

package/src/plugins/core/registerReactComponent.tsx

@@ -274,7 +274,6 @@ function PluginSlotInternal<T>(
       Objects.mapValues(hostElement.dataset, (value) =>
         typeof value === "string" ? parseAttrValue(value) : value,
       ),
-      hostElement.shadowRoot,
     );
   }
 

package/src/plugins/impl/FormPlugin.tsx

@@ -219,6 +219,8 @@ const Form = ({
   // The Form may be rendered before the child plugin is, so after mount
   // we lookup the plugin once again.
   useEffect(() => {
+    // TODO: Replace the post-mount registry lookup with reactive initialization.
+    // oxlint-disable-next-line react/no-deriving-state-in-effects -- The child registry entry may not exist until after the parent mounts.
     setInternalValue(UI_ELEMENT_REGISTRY.lookupValue(elementId));
   }, [elementId]);
 

package/src/plugins/impl/MatrixPlugin.tsx

@@ -126,6 +126,8 @@ const MatrixComponent = ({
   // which avoids stale-state bugs when the matrix shape changes.
   const [draft, setDraft] = useState(value);
   useEffect(() => {
+    // TODO: Model the active draft without synchronizing state in an effect.
+    // oxlint-disable-next-line react/no-deriving-state-in-effects -- Synchronize the editable draft when the controlled value changes.
     setDraft(value);
   }, [value]);
   const displayValue = activeCell == null ? value : draft;

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -90,6 +90,8 @@ const RangeSliderComponent = ({
 
   // Update internal value on prop change
   useEffect(() => {
+    // TODO: Replace this synchronization with a controlled-state primitive.
+    // oxlint-disable-next-line react/no-deriving-state-in-effects -- Synchronize the editable buffer when the controlled value changes.
     setInternalValue(value);
   }, [value]);
 

package/src/plugins/impl/SliderPlugin.tsx

@@ -158,6 +158,8 @@ const SliderComponent = ({
   const [internalValue, setInternalValue] = useState(value);
   // Update internal value on prop change
   useEffect(() => {
+    // TODO: Replace this synchronization with a controlled-state primitive.
+    // oxlint-disable-next-line react/no-deriving-state-in-effects -- Synchronize the editable buffer when the controlled value changes.
     setInternalValue(value);
   }, [value]);
 

package/src/plugins/impl/data-editor/__tests__/glide-data-editor.test.tsx

@@ -6,31 +6,36 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { GlideDataEditor } from "../glide-data-editor";
 
-const capturedDataEditor = vi.hoisted(() => ({
-  ref: undefined as React.RefObject<HTMLElement> | undefined,
-  onCellEdited: undefined as
-    | ((cell: [number, number], value: { data: unknown }) => void)
-    | undefined,
-  onRowAppended: undefined as (() => void) | undefined,
-}));
+interface MockDataEditorProps {
+  portalElementRef?: React.RefObject<HTMLElement>;
+  onCellEdited?: (cell: [number, number], value: { data: unknown }) => void;
+  onRowAppended?: () => void;
+}
+
+const captureDataEditorProps = vi.hoisted(() =>
+  vi.fn<(props: MockDataEditorProps) => void>(),
+);
+
+const capturedDataEditor = {
+  get ref() {
+    return captureDataEditorProps.mock.lastCall?.[0].portalElementRef;
+  },
+  get onCellEdited() {
+    return captureDataEditorProps.mock.lastCall?.[0].onCellEdited;
+  },
+  get onRowAppended() {
+    return captureDataEditorProps.mock.lastCall?.[0].onRowAppended;
+  },
+};
 
 vi.mock("@glideapps/glide-data-grid", async () => {
   const React = await import("react");
   return {
     default: React.forwardRef(function MockDataEditor(
-      props: {
-        portalElementRef?: React.RefObject<HTMLElement>;
-        onCellEdited?: (
-          cell: [number, number],
-          value: { data: unknown },
-        ) => void;
-        onRowAppended?: () => void;
-      },
+      props: MockDataEditorProps,
       _ref: React.Ref<HTMLDivElement>,
     ) {
-      capturedDataEditor.ref = props.portalElementRef;
-      capturedDataEditor.onCellEdited = props.onCellEdited;
-      capturedDataEditor.onRowAppended = props.onRowAppended;
+      captureDataEditorProps(props);
       return <div data-testid="mock-data-editor" />;
     }),
     CompactSelection: {

package/src/plugins/impl/data-frames/panel.tsx

@@ -177,6 +177,7 @@ export const TransformPanel: React.FC<Props> = ({
   return (
     <ColumnInfoContext value={effectiveColumns}>
       <ColumnFetchValuesContext value={getColumnValues}>
+        {/* oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Prevent Enter from submitting while using controls in the lazy form. */}
         <form
           onSubmit={(e) => e.preventDefault()}
           // When lazy, prevent Enter from submitting

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

@@ -41,7 +41,7 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
 
   const containerStyle: React.CSSProperties = {
     width: width || "100%",
-    height: height || (direction === "vertical" ? "400px" : "auto"),
+    height: height || "auto",
     maxWidth: "100%",
     // The slider derives its height entirely from its (loaded) images, so a
     // broken/slow-loading source would otherwise collapse it to nothing and

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

@@ -115,6 +115,21 @@ describe("ImageComparisonComponent", () => {
     }
   });
 
+  it.each(["horizontal", "vertical"] as const)(
+    "lets the container grow to the images when no height is given (%s)",
+    (direction) => {
+      const { container } = render(
+        <ImageComparisonComponent {...baseProps} direction={direction} />,
+      );
+
+      // A fixed height would crop tall images and leave the output's expand
+      // button with nothing to reveal.
+      const slider = container.querySelector("img-comparison-slider");
+      expect(slider).toBeTruthy();
+      expect(slider?.parentElement?.style.height).toBe("auto");
+    },
+  );
+
   it("leaves images unstyled when no dimensions are given", () => {
     const { getAllByAltText } = render(
       <ImageComparisonComponent {...baseProps} />,

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/JsonOutputPlugin.tsx

@@ -2,7 +2,6 @@
 
 import type { JSX } from "react";
 import { z } from "zod";
-import { EmotionCacheProvider } from "../../components/editor/output/EmotionCacheProvider";
 import { JsonOutput } from "../../components/editor/output/JsonOutput";
 import type {
   IStatelessPlugin,
@@ -30,18 +29,16 @@ export class JsonOutputPlugin implements IStatelessPlugin<Data> {
     valueTypes: z.enum(["json", "python"]).default("python"),
   });
 
-  render({ data, host }: IStatelessPluginProps<Data>): JSX.Element {
+  render({ data }: IStatelessPluginProps<Data>): JSX.Element {
     // `false` defaults to no text label
     const name = data.name === undefined ? false : data.name || "";
     return (
-      <EmotionCacheProvider container={host.shadowRoot}>
-        <JsonOutput
-          data={data.jsonData}
-          format="auto"
-          valueTypes={data.valueTypes}
-          name={name}
-        />
-      </EmotionCacheProvider>
+      <JsonOutput
+        data={data.jsonData}
+        format="auto"
+        valueTypes={data.valueTypes}
+        name={name}
+      />
     );
   }
 }

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/src/stories/sandbox.stories.tsx

@@ -0,0 +1,308 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { createStore, Provider, useAtomValue } from "jotai";
+import { useEffect, useRef, useState } from "react";
+import { ConnectionNotice } from "@/components/editor/alerts/connection-notice";
+import {
+  SandboxFooter,
+  SandboxStartupPanel,
+} from "@/components/editor/chrome/panels/sandbox-panel";
+import { SandboxController } from "@/components/editor/chrome/panels/sandbox-controller";
+import { chromeAtom } from "@/components/editor/chrome/state";
+import { Cell } from "@/components/editor/notebook-cell";
+import { VerticalLayoutWrapper } from "@/components/editor/renderers/vertical-layout/vertical-layout-wrapper";
+import {
+  createNotebookActions,
+  notebookAtom,
+  notebookReducer,
+} from "@/core/cells/cells";
+import { userConfigAtom } from "@/core/config/config";
+import {
+  AppConfigSchema,
+  defaultUserConfig,
+} from "@/core/config/config-schema";
+import { kernelStartupErrorAtom } from "@/core/errors/state";
+import { connectionAtom } from "@/core/network/connection";
+import { requestClientAtom } from "@/core/network/requests";
+import { createStaticRequests } from "@/core/network/requests-static";
+import {
+  sandboxActionsAtom,
+  sandboxAtom,
+  sandboxSyncAtom,
+} from "@/core/packages/sandbox-state";
+import { filenameAtom } from "@/core/saving/file-state";
+import { WebSocketClosedReason, WebSocketState } from "@/core/websocket/types";
+import { HTTPError } from "@/utils/errors";
+
+const manifest = `requires-python = ">=3.13"
+dependencies = ["marimo", "polars", "rich==999.0.0"]
+
+[tool.uv]
+index-url = "https://pypi.org/simple"
+
+[tool.notebook]
+description = "Explore bike trips"
+`;
+const resolutionError = `No solution found when resolving dependencies:
+  Because there is no version of rich==999.0.0 and your script depends
+  on rich==999.0.0, your script's requirements are unsatisfiable.`;
+
+interface Props {
+  surface: "notebook" | "packages" | "manifest";
+  phase:
+    | "preparing"
+    | "starting"
+    | "failed"
+    | "ready"
+    | "syncing"
+    | "sync-failed";
+  existingCells: boolean;
+  backend: "uv" | "pixi";
+  saveResult: "success" | "failure" | "stale";
+  theme: "light" | "dark";
+}
+
+function OpenManifest() {
+  const actions = useAtomValue(sandboxActionsAtom);
+  const opened = useRef(false);
+  useEffect(() => {
+    if (actions && !opened.current) {
+      opened.current = true;
+      void actions.editManifest();
+    }
+  }, [actions]);
+  return null;
+}
+
+function SandboxStory(props: Props) {
+  const [store] = useState(() => {
+    const state = createStore();
+    let currentManifest =
+      props.phase === "failed"
+        ? manifest
+        : manifest.replace("rich==999.0.0", "rich>=13.0.0");
+    const config = defaultUserConfig();
+    state.set(userConfigAtom, {
+      ...config,
+      display: { ...config.display, theme: props.theme },
+    });
+    state.set(filenameAtom, "bike_trips.py");
+    state.set(sandboxAtom, {
+      backend: props.backend,
+      manifest: currentManifest,
+      filename: "bike_trips.py",
+    });
+    state.set(chromeAtom, {
+      selectedPanel: "packages",
+      isSidebarOpen: props.surface !== "notebook",
+      isDeveloperPanelOpen: false,
+      selectedDeveloperPanelTab: "errors",
+    });
+    state.set(
+      connectionAtom,
+      props.phase === "preparing" || props.phase === "starting"
+        ? {
+            state: WebSocketState.CONNECTING,
+            phase:
+              props.phase === "preparing"
+                ? "preparing-environment"
+                : "starting-kernel",
+          }
+        : props.phase === "failed"
+          ? {
+              state: WebSocketState.CLOSED,
+              code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+              reason: "Kernel startup failed",
+              phase: "preparing-environment",
+            }
+          : { state: WebSocketState.OPEN },
+    );
+    state.set(
+      kernelStartupErrorAtom,
+      props.phase === "failed" ? resolutionError : null,
+    );
+    state.set(sandboxSyncAtom, {
+      pending: props.phase === "syncing",
+      error: props.phase === "sync-failed" ? resolutionError : null,
+    });
+    if (props.existingCells) {
+      const actions = createNotebookActions((action) =>
+        state.set(notebookAtom, (value) => notebookReducer(value, action)),
+      );
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        code: 'import polars as pl\n\ntrips = pl.read_csv("bike_trips.csv")\ntrips.head()',
+        autoFocus: false,
+      });
+    }
+    state.set(requestClientAtom, {
+      ...createStaticRequests(),
+      getSandbox: async () => ({
+        backend: props.backend,
+        manifest: currentManifest,
+        filename: "bike_trips.py",
+      }),
+      updateManifest: async ({ contents }) => {
+        if (props.saveResult === "stale") {
+          throw new HTTPError(
+            409,
+            "The manifest changed on disk. Reopen it before saving.",
+          );
+        }
+        currentManifest = contents;
+        return {
+          backend: props.backend,
+          manifest: currentManifest,
+          filename: "bike_trips.py",
+        };
+      },
+      syncSandbox: async () => {
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        if (props.saveResult === "failure") {
+          return {
+            success: false,
+            error:
+              "Failed to download rich from https://pypi.org/simple/rich/\n  Request failed after 3 retries: connection timed out",
+            restartRequired: false,
+            reconnect: false,
+          };
+        }
+        state.set(connectionAtom, { state: WebSocketState.OPEN });
+        state.set(kernelStartupErrorAtom, null);
+        return {
+          success: true,
+          error: null,
+          restartRequired: false,
+          reconnect: false,
+        };
+      },
+    });
+    return state;
+  });
+  const appConfig = AppConfigSchema.parse({ width: "full" });
+  const reconnect = async () => {
+    store.set(connectionAtom, { state: WebSocketState.OPEN });
+  };
+  return (
+    <Provider store={store}>
+      <SandboxController onReconnect={reconnect} />
+      {props.surface === "manifest" && <OpenManifest />}
+      <div
+        data-testid="sandbox-story"
+        className="bg-background text-foreground"
+        style={{
+          width: props.surface === "notebook" ? 820 : 400,
+        }}
+      >
+        {props.surface === "notebook" && (
+          <>
+            <ConnectionNotice appConfig={appConfig} onRetry={reconnect} />
+            {store.get(notebookAtom).cellIds.inOrderIds.map((cellId) => (
+              <VerticalLayoutWrapper key={cellId} appConfig={appConfig}>
+                <Cell
+                  cellId={cellId}
+                  theme={props.theme}
+                  mode="edit"
+                  showPlaceholder={false}
+                  canDelete={true}
+                  isCollapsed={false}
+                  collapseCount={0}
+                  canMoveX={false}
+                  userConfig={store.get(userConfigAtom)}
+                />
+              </VerticalLayoutWrapper>
+            ))}
+          </>
+        )}
+        {props.surface === "packages" &&
+          (props.phase === "failed" ||
+          props.phase === "sync-failed" ||
+          props.phase === "preparing" ? (
+            <SandboxStartupPanel />
+          ) : (
+            <SandboxFooter />
+          ))}
+      </div>
+    </Provider>
+  );
+}
+
+const meta = {
+  title: "Sandbox/States",
+  component: SandboxStory,
+  parameters: { layout: "centered" },
+  args: {
+    surface: "notebook",
+    phase: "preparing",
+    existingCells: true,
+    backend: "uv",
+    saveResult: "success",
+    theme: "light",
+  },
+  render: (args, context) => (
+    <SandboxStory
+      key={JSON.stringify([args, context.globals.theme])}
+      {...args}
+      theme={context.globals.theme === "dark" ? "dark" : "light"}
+    />
+  ),
+} satisfies Meta<typeof SandboxStory>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExistingNotebookPreparing: Story = {
+  name: "Startup notice / preparing",
+};
+export const EmptyNotebookPreparing: Story = {
+  name: "Empty notebook / preparing",
+  args: { existingCells: false },
+};
+export const StartingKernel: Story = {
+  name: "Startup notice / starting kernel",
+  args: { phase: "starting" },
+};
+export const ExistingNotebookFailed: Story = {
+  name: "Startup notice / failed",
+  args: { phase: "failed" },
+};
+export const EmptyNotebookFailed: Story = {
+  name: "Empty notebook / failed",
+  args: { phase: "failed", existingCells: false },
+};
+export const PackagesPreparing: Story = {
+  name: "Setup details / preparing",
+  args: { surface: "packages" },
+};
+export const PackagesFailed: Story = {
+  name: "Setup details / failed",
+  args: { surface: "packages", phase: "failed" },
+};
+export const PackagesReady: Story = {
+  name: "Status row / ready",
+  args: { surface: "packages", phase: "ready" },
+};
+export const PackagesSyncing: Story = {
+  name: "Status row / syncing",
+  args: { surface: "packages", phase: "syncing" },
+};
+export const PackagesSyncFailed: Story = {
+  name: "Setup details / sync failed",
+  args: { surface: "packages", phase: "sync-failed" },
+};
+export const PixiPackagesReady: Story = {
+  name: "Status row / pixi",
+  args: { surface: "packages", phase: "ready", backend: "pixi" },
+};
+export const ManifestEditor: Story = {
+  name: "Manifest / edit",
+  args: { surface: "manifest", phase: "failed" },
+};
+export const ManifestSyncFails: Story = {
+  name: "Manifest / failed save",
+  args: { surface: "manifest", phase: "failed", saveResult: "failure" },
+};
+export const ManifestChangedOnDisk: Story = {
+  name: "Manifest / changed on disk",
+  args: { surface: "manifest", phase: "failed", saveResult: "stale" },
+};