@marimo-team/frontend 0.25.2-dev9 → 0.25.2-dev90

package/src/plugins/impl/__tests__/DataTablePlugin.test.tsx

@@ -4,11 +4,17 @@ import { Tooltip } from "radix-ui";
 
 const TooltipProvider = Tooltip.Provider;
 
-import { act, render, screen, waitFor } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import { Provider } from "jotai";
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
-import type { DownloadAsArgs } from "@/components/data-table/schemas";
+import type { DownloadAsFunction } from "@/components/data-table/schemas";
 import type { FieldTypesWithExternalType } from "@/components/data-table/types";
 import { store } from "@/core/state/jotai";
 import {
@@ -19,6 +25,10 @@ import {
 
 // Default to normal (non-static) mode; individual tests flip this on.
 const mockIsStatic = vi.fn().mockReturnValue(false);
+vi.mock("@/utils/download", () => ({
+  downloadByURL: vi.fn(),
+  withLoadingToast: vi.fn(async (_title, callback) => callback()),
+}));
 vi.mock("@/core/static/static-state", async (importOriginal) => {
   const actual =
     await importOriginal<typeof import("@/core/static/static-state")>();
@@ -30,9 +40,15 @@ beforeAll(() => {
 });
 
 describe("LoadingDataTableComponent", () => {
-  it("keeps data columns when inferred types include a row header", async () => {
+  it("keeps data columns and routes each export to its RPC", async () => {
     const host = document.createElement("div");
     const data = JSON.stringify([{ index: "first", value: 1 }]);
+    const downloadAs = vi
+      .fn()
+      .mockResolvedValue({ url: "export", filename: "table.csv" });
+    const downloadGeoJSON = vi
+      .fn()
+      .mockResolvedValue({ url: "export", filename: "table.geojson" });
 
     render(
       <Provider store={store}>
@@ -43,7 +59,7 @@ describe("LoadingDataTableComponent", () => {
             pagination={false}
             pageSize={10}
             selection={null}
-            showDownload={false}
+            showDownload={true}
             showFilters={false}
             showColumnSummaries={false}
             showDataTypes={false}
@@ -68,7 +84,22 @@ describe("LoadingDataTableComponent", () => {
               cell_styles: null,
               cell_hover_texts: null,
             })}
-            download_as={vi.fn() as DownloadAsArgs}
+            download_as={downloadAs}
+            download_geojson={downloadGeoJSON}
+            get_export_metadata={vi.fn().mockResolvedValue({
+              geometry_columns: [
+                { name: "value", encoding: "objects", crs: "EPSG:4326" },
+              ],
+              primary_geometry_column: "value",
+              default_geometry_column: "value",
+              formats: {
+                geojson: {
+                  available: true,
+                  reason: null,
+                  missing_packages: [],
+                },
+              },
+            })}
             get_column_summaries={vi.fn()}
             get_data_url={vi.fn() as GetDataUrl}
             get_row_ids={vi.fn() as GetRowIds}
@@ -83,6 +114,26 @@ describe("LoadingDataTableComponent", () => {
         screen.getByRole("columnheader", { name: "value" }),
       ).toBeInTheDocument();
     });
+    fireEvent.click(screen.getByTestId("export-button"));
+    await screen.findByRole("dialog", { name: "Export table" });
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "Download GeoJSON" }),
+      ).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Download GeoJSON" }));
+    await waitFor(() =>
+      expect(downloadGeoJSON).toHaveBeenCalledWith({
+        format: "geojson",
+        geometry_column: "value",
+      }),
+    );
+    expect(downloadAs).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole("button", { name: "Download CSV" }));
+    await waitFor(() =>
+      expect(downloadAs).toHaveBeenCalledWith({ format: "csv" }),
+    );
+    expect(downloadGeoJSON).toHaveBeenCalledTimes(1);
   });
 
   it("does not log duplicate keys when a pivot becomes empty", async () => {
@@ -122,7 +173,9 @@ describe("LoadingDataTableComponent", () => {
       showSearch: false,
       value: [] as (number | string | { rowId: string; columnName?: string })[],
       setValue: vi.fn(),
-      download_as: vi.fn() as DownloadAsArgs,
+      download_as: vi.fn() as DownloadAsFunction,
+      download_geojson: vi.fn(),
+      get_export_metadata: vi.fn(),
       get_column_summaries: vi.fn(),
       get_data_url: vi.fn() as GetDataUrl,
       get_row_ids: vi.fn() as GetRowIds,
@@ -263,7 +316,9 @@ describe("LoadingDataTableComponent", () => {
       showSearch: true,
       value: [] as (number | string | { rowId: string; columnName?: string })[],
       setValue,
-      download_as: vi.fn() as DownloadAsArgs,
+      download_as: vi.fn() as DownloadAsFunction,
+      download_geojson: vi.fn(),
+      get_export_metadata: vi.fn(),
       get_column_summaries: vi.fn().mockResolvedValue({
         data: null,
         stats: {},
@@ -379,7 +434,9 @@ describe("static notebook control suppression", () => {
         cell_styles: null,
         cell_hover_texts: null,
       }),
-      download_as: vi.fn() as DownloadAsArgs,
+      download_as: vi.fn() as DownloadAsFunction,
+      download_geojson: vi.fn(),
+      get_export_metadata: vi.fn(),
       get_column_summaries: vi.fn().mockResolvedValue({
         data: null,
         stats: {},

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);