@marimo-team/islands 0.25.2-dev12 → 0.25.2-dev120

package/src/plugins/impl/data-frames/forms/__tests__/__snapshots__/form.test.tsx.snap

@@ -28,7 +28,6 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
           class="relative"
         >
           <button
-            aria-controls="radix-_r_27_"
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -84,7 +83,6 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
           class="relative"
         >
           <button
-            aria-controls="radix-_r_29_"
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -153,7 +151,6 @@ exports[`renderZodSchema > should render a form column_conversion 1`] = `
         >
           <button
             aria-autocomplete="none"
-            aria-controls="radix-_r_e_"
             aria-expanded="false"
             class="flex h-6 w-fit items-center justify-between rounded-sm bg-background px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer forced-color-adjust-none forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:disabled:text-[GrayText] shadow-xs-solid border border-input hover:shadow-sm-solid focus-visible:border-primary focus-visible:shadow-md-solid disabled:hover:shadow-xs-solid forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText] mb-0 min-w-[180px]"
             data-placeholder=""
@@ -202,7 +199,6 @@ exports[`renderZodSchema > should render a form column_conversion 1`] = `
         </label>
         <button
           aria-autocomplete="none"
-          aria-controls="radix-_r_g_"
           aria-expanded="false"
           class="flex h-6 w-fit items-center justify-between rounded-sm bg-background px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer forced-color-adjust-none forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:disabled:text-[GrayText] shadow-xs-solid border border-input hover:shadow-sm-solid focus-visible:border-primary focus-visible:shadow-md-solid disabled:hover:shadow-xs-solid forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText] mb-0 min-w-[180px]"
           data-placeholder=""
@@ -335,7 +331,6 @@ exports[`renderZodSchema > should render a form expand_dict 1`] = `
         >
           <button
             aria-autocomplete="none"
-            aria-controls="radix-_r_2r_"
             aria-expanded="false"
             class="flex h-6 w-fit items-center justify-between rounded-sm bg-background px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer forced-color-adjust-none forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:disabled:text-[GrayText] shadow-xs-solid border border-input hover:shadow-sm-solid focus-visible:border-primary focus-visible:shadow-md-solid disabled:hover:shadow-xs-solid forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText] mb-0 min-w-[180px]"
             data-placeholder=""
@@ -402,7 +397,6 @@ exports[`renderZodSchema > should render a form explode_columns 1`] = `
           class="relative"
         >
           <button
-            aria-controls="radix-_r_2p_"
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -600,7 +594,6 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
           class="relative"
         >
           <button
-            aria-controls="radix-_r_1p_"
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -656,7 +649,6 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
           class="relative"
         >
           <button
-            aria-controls="radix-_r_1r_"
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -708,7 +700,6 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
         </label>
         <button
           aria-autocomplete="none"
-          aria-controls="radix-_r_1t_"
           aria-expanded="false"
           class="flex h-6 w-fit items-center justify-between rounded-sm bg-background px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer forced-color-adjust-none forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:disabled:text-[GrayText] shadow-xs-solid border border-input hover:shadow-sm-solid focus-visible:border-primary focus-visible:shadow-md-solid disabled:hover:shadow-xs-solid forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText] mb-0 min-w-[180px]"
           data-placeholder=""
@@ -808,7 +799,6 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
           class="relative"
         >
           <button
-            aria-controls="radix-_r_3b_"
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -864,7 +854,6 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
           class="relative"
         >
           <button
-            aria-controls="radix-_r_3d_"
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -920,7 +909,6 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
           class="relative"
         >
           <button
-            aria-controls="radix-_r_3f_"
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -972,7 +960,6 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
         </label>
         <button
           aria-autocomplete="none"
-          aria-controls="radix-_r_3h_"
           aria-expanded="false"
           class="flex h-6 w-fit items-center justify-between rounded-sm bg-background px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer forced-color-adjust-none forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:disabled:text-[GrayText] shadow-xs-solid border border-input hover:shadow-sm-solid focus-visible:border-primary focus-visible:shadow-md-solid disabled:hover:shadow-xs-solid forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText] mb-0 min-w-[180px]"
           data-placeholder=""
@@ -1037,7 +1024,6 @@ exports[`renderZodSchema > should render a form rename_column 1`] = `
         >
           <button
             aria-autocomplete="none"
-            aria-controls="radix-_r_6_"
             aria-expanded="false"
             class="flex h-6 w-fit items-center justify-between rounded-sm bg-background px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer forced-color-adjust-none forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:disabled:text-[GrayText] shadow-xs-solid border border-input hover:shadow-sm-solid focus-visible:border-primary focus-visible:shadow-md-solid disabled:hover:shadow-xs-solid forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText] mb-0 min-w-[180px]"
             data-placeholder=""
@@ -1315,7 +1301,6 @@ exports[`renderZodSchema > should render a form select_columns 1`] = `
           class="relative"
         >
           <button
-            aria-controls="radix-_r_4_"
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -1434,7 +1419,6 @@ exports[`renderZodSchema > should render a form sort_column 1`] = `
         >
           <button
             aria-autocomplete="none"
-            aria-controls="radix-_r_1e_"
             aria-expanded="false"
             class="flex h-6 w-fit items-center justify-between rounded-sm bg-background px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer forced-color-adjust-none forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:disabled:text-[GrayText] shadow-xs-solid border border-input hover:shadow-sm-solid focus-visible:border-primary focus-visible:shadow-md-solid disabled:hover:shadow-xs-solid forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText] mb-0 min-w-[180px]"
             data-placeholder=""
@@ -1603,7 +1587,6 @@ exports[`renderZodSchema > should render a form unique 1`] = `
           class="relative"
         >
           <button
-            aria-controls="radix-_r_32_"
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -1655,7 +1638,6 @@ exports[`renderZodSchema > should render a form unique 1`] = `
         </label>
         <button
           aria-autocomplete="none"
-          aria-controls="radix-_r_34_"
           aria-expanded="false"
           class="flex h-6 w-fit items-center justify-between rounded-sm bg-background px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer forced-color-adjust-none forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:disabled:text-[GrayText] shadow-xs-solid border border-input hover:shadow-sm-solid focus-visible:border-primary focus-visible:shadow-md-solid disabled:hover:shadow-xs-solid forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText] mb-0 min-w-[180px]"
           data-placeholder=""
@@ -1709,7 +1691,6 @@ exports[`renders custom forms column_id 1`] = `
     >
       <button
         aria-autocomplete="none"
-        aria-controls="radix-_r_3q_"
         aria-expanded="false"
         class="flex h-6 w-fit items-center justify-between rounded-sm bg-background px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer forced-color-adjust-none forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:disabled:text-[GrayText] shadow-xs-solid border border-input hover:shadow-sm-solid focus-visible:border-primary focus-visible:shadow-md-solid disabled:hover:shadow-xs-solid forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText] mb-0 min-w-[180px]"
         data-placeholder=""
@@ -1763,7 +1744,6 @@ exports[`renders custom forms column_id_array 1`] = `
       class="relative"
     >
       <button
-        aria-controls="radix-_r_41_"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="dialog"
@@ -1814,7 +1794,6 @@ exports[`renders custom forms column_id_dot_array 1`] = `
       class="relative"
     >
       <button
-        aria-controls="radix-_r_43_"
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="dialog"
@@ -1870,7 +1849,6 @@ exports[`renders custom forms column_id_optional 1`] = `
     >
       <button
         aria-autocomplete="none"
-        aria-controls="radix-_r_45_"
         aria-expanded="false"
         class="flex h-6 w-fit items-center justify-between rounded-sm bg-background px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer forced-color-adjust-none forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:disabled:text-[GrayText] shadow-xs-solid border border-input hover:shadow-sm-solid focus-visible:border-primary focus-visible:shadow-md-solid disabled:hover:shadow-xs-solid forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText] mb-0 min-w-[180px]"
         data-placeholder=""

package/src/stories/cell.stories.tsx

@@ -14,7 +14,7 @@ import { connectionAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import { resolveRequestClient } from "@/core/network/resolve";
 import type { CellConfig } from "@/core/network/types";
-import { WebSocketState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/websocket/types";
 import { MultiColumn } from "@/utils/id-tree";
 import type { Milliseconds, Seconds } from "@/utils/time";
 import { Cell as EditorCell } from "../components/editor/notebook-cell";
@@ -84,7 +84,7 @@ const Cell: React.FC<{
 
   const store = createStore();
   store.set(notebookAtom, notebook);
-  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(requestClientAtom, resolveRequestClient());
   return (
     <Provider store={store}>

package/src/stories/dataframe.stories.tsx

@@ -42,6 +42,13 @@ export const DataFrame: StoryObj = {
         host={document.body}
         showDownload={false}
         download_as={async () => ({ url: "", filename: "" })}
+        download_geojson={async () => ({ url: "", filename: "" })}
+        get_export_metadata={async () => ({
+          geometry_columns: [],
+          primary_geometry_column: null,
+          default_geometry_column: null,
+          formats: {},
+        })}
         get_size_bytes={async () => ({ size_bytes: null })}
         lazy={false}
       />

package/src/stories/layout/vertical/one-column.stories.tsx

@@ -11,7 +11,7 @@ import { showCodeInRunModeAtom } from "@/core/meta/state";
 import { connectionAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import { resolveRequestClient } from "@/core/network/resolve";
-import { WebSocketState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/websocket/types";
 import { MultiColumn } from "@/utils/id-tree";
 import type { Milliseconds, Seconds } from "@/utils/time";
 import { CellArray } from "../../../components/editor/renderers/cell-array";
@@ -105,7 +105,7 @@ const EditModeCodeShown = () => {
 
   const store = createStore();
   store.set(notebookAtom, notebook);
-  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(requestClientAtom, resolveRequestClient());
   store.set(showCodeInRunModeAtom, true);
 
@@ -130,7 +130,7 @@ const EditModeCodeHidden = () => {
 
   const store = createStore();
   store.set(notebookAtom, notebook);
-  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(requestClientAtom, resolveRequestClient());
   store.set(showCodeInRunModeAtom, true);
 
@@ -155,7 +155,7 @@ const ReadModeCodeShown = () => {
 
   const store = createStore();
   store.set(notebookAtom, notebook);
-  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(requestClientAtom, resolveRequestClient());
   store.set(showCodeInRunModeAtom, true);
 
@@ -174,7 +174,7 @@ const ReadModeCodeHidden = () => {
 
   const store = createStore();
   store.set(notebookAtom, notebook);
-  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(requestClientAtom, resolveRequestClient());
   store.set(showCodeInRunModeAtom, true);
 

package/src/stories/progress-stages.stories.tsx

@@ -0,0 +1,62 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  ProgressStages,
+  type ProgressState,
+} from "@/components/ui/progress-stages";
+
+function ProgressStagesStory({
+  state,
+  completedStage,
+}: {
+  state: ProgressState;
+  completedStage: boolean;
+}) {
+  return (
+    <div className="w-80 space-y-6">
+      <p className="text-sm text-muted-foreground">
+        Isolated stage styling. For the actual notebook and sidebar, use the
+        walkthroughs under Runtime.
+      </p>
+      <ProgressStages
+        label="Example stages"
+        stages={[
+          ...(completedStage
+            ? [
+                {
+                  id: "previous",
+                  state: "succeeded" as const,
+                  title: "Previous stage",
+                  description: "This stage has finished.",
+                },
+              ]
+            : []),
+          {
+            id: "current",
+            state,
+            title: "Current stage",
+            description: "Change the state using the Storybook controls.",
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+const meta = {
+  title: "UI Primitives/ProgressStages",
+  component: ProgressStagesStory,
+  parameters: { layout: "centered" },
+  args: { state: "running", completedStage: true },
+  argTypes: {
+    state: {
+      control: "radio",
+      options: ["waiting", "running", "succeeded", "failed"],
+    },
+  },
+} satisfies Meta<typeof ProgressStagesStory>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const MultipleStages: Story = {};
+export const SingleStage: Story = { args: { completedStage: false } };

package/src/stories/runtime-existing.stories.tsx

@@ -0,0 +1,44 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { type RuntimeStory, runtimeStoryMeta } from "./runtime-story";
+
+const meta = {
+  ...runtimeStoryMeta,
+  title: "Runtime/Existing environment",
+  args: { ...runtimeStoryMeta.args, backend: null, phase: "starting" },
+} satisfies Meta<typeof RuntimeStory>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Walkthrough: Story = {
+  name: "Walkthrough",
+  args: { manual: true, detailsOpen: true },
+};
+export const NotebookConnecting: Story = {
+  name: "Notebook — connecting",
+  args: {},
+};
+export const NotebookFailed: Story = {
+  name: "Notebook — failure and retry",
+  args: { phase: "failed" },
+};
+export const EmptyNotebook: Story = {
+  name: "Empty notebook — connecting",
+  args: { existingCells: false },
+};
+export const DetailsConnecting: Story = {
+  name: "Sidebar — connecting",
+  args: { surface: "packages" },
+};
+export const DetailsFailed: Story = {
+  name: "Sidebar — failure details",
+  args: { surface: "packages", phase: "failed" },
+};
+export const Ready: Story = {
+  name: "Sidebar — ready",
+  args: { surface: "packages", phase: "ready" },
+};
+export const Completion: Story = {
+  name: "Automatic completion",
+  args: { interactive: true },
+};

package/src/stories/runtime-maintenance.stories.tsx

@@ -0,0 +1,40 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { type RuntimeStory, runtimeStoryMeta } from "./runtime-story";
+
+const meta = {
+  ...runtimeStoryMeta,
+  title: "Runtime/Sandbox maintenance",
+  args: { ...runtimeStoryMeta.args, backend: "uv", surface: "packages" },
+} satisfies Meta<typeof RuntimeStory>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Syncing: Story = {
+  name: "Sync — in progress",
+  args: { phase: "syncing" },
+};
+export const SyncFailed: Story = {
+  name: "Sync — failed",
+  args: { phase: "sync-failed" },
+};
+export const Synced: Story = {
+  name: "Sync — completed",
+  args: { phase: "synced" },
+};
+export const RestartRequired: Story = {
+  name: "Sync — restart required",
+  args: { phase: "restart-required" },
+};
+export const ManifestEditor: Story = {
+  name: "Manifest — edit",
+  args: { surface: "manifest", phase: "failed" },
+};
+export const ManifestSyncFailed: Story = {
+  name: "Manifest — sync failed",
+  args: { surface: "manifest", phase: "failed", saveResult: "failure" },
+};
+export const ManifestChanged: Story = {
+  name: "Manifest — changed on disk",
+  args: { surface: "manifest", phase: "failed", saveResult: "stale" },
+};

package/src/stories/runtime-pixi.stories.tsx

@@ -0,0 +1,28 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { type RuntimeStory, runtimeStoryMeta } from "./runtime-story";
+
+const meta = {
+  ...runtimeStoryMeta,
+  title: "Runtime/pixi sandbox",
+  args: { ...runtimeStoryMeta.args, backend: "pixi" },
+} satisfies Meta<typeof RuntimeStory>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Walkthrough: Story = {
+  name: "Walkthrough",
+  args: { manual: true, detailsOpen: true },
+};
+export const Ready: Story = {
+  name: "Sidebar — ready",
+  args: { surface: "packages", phase: "ready" },
+};
+export const Completion: Story = {
+  name: "Notebook — automatic completion",
+  args: { interactive: true },
+};
+export const EmptyCompletion: Story = {
+  name: "Empty notebook — automatic completion",
+  args: { interactive: true, existingCells: false },
+};