@marimo-team/islands 0.25.2-dev10 → 0.25.2-dev101

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 },
+};