@marimo-team/islands 0.25.2-dev14 → 0.25.2-dev140

package/src/plugins/impl/__tests__/widget-labels.test.tsx

@@ -0,0 +1,122 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { initialModeAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+import { DatePickerPlugin } from "../DatePickerPlugin";
+import { DateRangePickerPlugin } from "../DateRangePlugin";
+import { DateTimePickerPlugin } from "../DateTimePickerPlugin";
+
+const sharedProps = () => ({
+  host: document.createElement("div"),
+  setValue: vi.fn(),
+  functions: {},
+});
+
+const widgets = [
+  {
+    name: "date",
+    role: "group",
+    fallback: "date picker",
+    render: (label: string | null, disabled = false) =>
+      new DatePickerPlugin().render({
+        ...sharedProps(),
+        value: "2026-10-02",
+        data: {
+          label,
+          disabled,
+          start: "2026-01-01",
+          stop: "2026-12-31",
+          fullWidth: false,
+        },
+      }),
+  },
+  {
+    name: "datetime",
+    role: "group",
+    fallback: "date time picker",
+    render: (label: string | null, disabled = false) =>
+      new DateTimePickerPlugin().render({
+        ...sharedProps(),
+        value: "2026-10-02T12:00:00",
+        data: {
+          label,
+          disabled,
+          start: "2026-01-01T00:00:00",
+          stop: "2026-12-31T23:59:59",
+          precision: "minute",
+          fullWidth: false,
+        },
+      }),
+  },
+  {
+    name: "date range",
+    role: "group",
+    fallback: "date range picker",
+    render: (label: string | null, disabled = false) =>
+      new DateRangePickerPlugin().render({
+        ...sharedProps(),
+        value: ["2026-10-02", "2026-10-03"],
+        data: {
+          label,
+          disabled,
+          start: "2026-01-01",
+          stop: "2026-12-31",
+          fullWidth: false,
+        },
+      }),
+  },
+];
+
+beforeEach(() => store.set(initialModeAtom, "edit"));
+
+describe.each(widgets)("$name accessible labels", (widget) => {
+  it("uses rendered formatting and decoded entities, and follows label updates", () => {
+    const { getByRole, rerender } = render(
+      widget.render("<span>Visit <strong>date</strong> &amp; time</span>"),
+    );
+    expect(getByRole(widget.role, { name: "Visit date & time" })).toBeTruthy();
+    rerender(widget.render("<span>Updated <em>label</em></span>"));
+    expect(getByRole(widget.role, { name: "Updated label" })).toBeTruthy();
+    rerender(widget.render(null));
+    expect(getByRole(widget.role, { name: widget.fallback })).toBeTruthy();
+  });
+
+  it.each([null, ""])("uses the fallback when label is %s", (label) => {
+    const { getByRole } = render(widget.render(label));
+    expect(getByRole(widget.role, { name: widget.fallback })).toBeTruthy();
+  });
+
+  it("names the calendar button and every editable segment", () => {
+    const { getByRole, getAllByRole } = render(
+      widget.render("<strong>Visit</strong> &amp; time"),
+    );
+    expect(getByRole("button", { name: "Calendar Visit & time" })).toBeTruthy();
+    for (const segment of getAllByRole("spinbutton")) {
+      expect(segment).toHaveAccessibleName(/Visit & time/);
+    }
+  });
+
+  it("preserves disabled controls with a formatted label", () => {
+    const { getByRole, getAllByRole } = render(
+      widget.render("<strong>Visit</strong>", true),
+    );
+    expect(getByRole("button", { name: "Calendar Visit" })).toBeDisabled();
+    for (const segment of getAllByRole("spinbutton")) {
+      expect(segment).toHaveAttribute("aria-disabled", "true");
+    }
+  });
+
+  it("keeps labels distinct for multiple widgets", () => {
+    const { getByRole } = render(
+      <>
+        {widget.render("First")}
+        {widget.render("Second")}
+      </>,
+    );
+    expect(getByRole(widget.role, { name: "First" })).not.toBe(
+      getByRole(widget.role, { name: "Second" }),
+    );
+  });
+});

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -27,7 +27,7 @@ const messageSchema = z.array(
     role: z.enum(["system", "user", "assistant"]),
     content: z.string().nullable(),
     parts: z.array(z.any()),
-    metadata: z.any().nullable(),
+    metadata: z.any().optional(),
   }),
 );
 

package/src/plugins/impl/common/labeled.tsx

@@ -9,7 +9,8 @@ interface Props {
   label: string | null | undefined;
   className?: string;
   labelClassName?: string;
-  id?: string;
+  labelId?: string;
+  controlId?: string;
   fullWidth?: boolean;
   /**
    * Align the label to the top, left, or right of the component.
@@ -27,8 +28,9 @@ export const Labeled: React.FC<PropsWithChildren<Props>> = ({
   align = "left",
   className,
   labelClassName,
+  labelId,
   fullWidth,
-  id,
+  controlId,
 }) => {
   // If fullWidth is true, force align to be "top"
   if (fullWidth) {
@@ -45,7 +47,11 @@ export const Labeled: React.FC<PropsWithChildren<Props>> = ({
 
   const labelElement = (
     <div part="label" className="inline-flex items-center m-0 p-0">
-      <Label htmlFor={id} className={cn("font-prose", labelClassName)}>
+      <Label
+        id={labelId}
+        htmlFor={controlId}
+        className={cn("font-prose", labelClassName)}
+      >
         {renderHTML({ html: label })}
       </Label>
     </div>

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

@@ -12,8 +12,12 @@ import {
 } from "react";
 import { z } from "zod";
 import {
-  type DownloadAsArgs,
+  type DownloadAsFunction,
   DownloadAsSchema,
+  type DownloadGeoJSON,
+  DownloadGeoJSONSchema,
+  type GetExportMetadata,
+  GetExportMetadataSchema,
 } from "@/components/data-table/schemas";
 import type { FieldTypesWithExternalType } from "@/components/data-table/types";
 import { ReadonlyCode } from "@/components/editor/code/readonly-python-code";
@@ -82,7 +86,9 @@ type PluginFunctions = {
     data: TableData<T>;
     total_rows: number;
   }>;
-  download_as: DownloadAsArgs;
+  download_as: DownloadAsFunction;
+  download_geojson: DownloadGeoJSON;
+  get_export_metadata: GetExportMetadata;
   get_size_bytes: (opts: Record<string, never>) => Promise<{
     size_bytes?: number | null;
   }>;
@@ -153,6 +159,8 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
         }),
       ),
     download_as: DownloadAsSchema,
+    download_geojson: DownloadGeoJSONSchema,
+    get_export_metadata: GetExportMetadataSchema,
     get_size_bytes: rpc
       .input(z.object({}))
       .output(z.object({ size_bytes: z.number().nullish() })),
@@ -174,7 +182,7 @@ interface DataTableProps extends Data, PluginFunctions {
   setValue: (value: S) => void;
   host: HTMLElement;
   showDownload: boolean;
-  download_as: DownloadAsArgs;
+  download_as: DownloadAsFunction;
 }
 
 const EMPTY: Transformations = {
@@ -194,6 +202,8 @@ export const DataFrameComponent = memo(
     get_column_values,
     search,
     download_as,
+    download_geojson,
+    get_export_metadata,
     get_size_bytes,
     host,
   }: DataTableProps): JSX.Element => {
@@ -337,6 +347,8 @@ export const DataFrameComponent = memo(
           rowHeaders={row_headers || Arrays.EMPTY}
           showDownload={showDownload}
           download_as={download_as}
+          download_geojson={download_geojson}
+          get_export_metadata={get_export_metadata}
           get_size_bytes={get_size_bytes}
           showSearch={false}
           showFilters={false}

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