@marimo-team/frontend 0.25.2-dev7 → 0.25.2-dev89

package/src/mount.tsx

@@ -62,7 +62,7 @@ import {
 import { maybeRegisterVSCodeBindings } from "./core/vscode/vscode-bindings";
 import type { FileStore } from "./core/wasm/store";
 import { notebookFileStore } from "./core/wasm/store";
-import { WebSocketState } from "./core/websocket/types";
+import { ConnectionState } from "./core/websocket/types";
 import {
   handleWidgetMessage,
   WIDGET_REGISTRY,
@@ -359,7 +359,7 @@ function initStore(options: unknown) {
     });
     // If the remote runtime is not lazy, start it in CONNECTING
     if (!firstRuntimeConfig.lazy && !isStaticNotebook()) {
-      store.set(connectionAtom, { state: WebSocketState.CONNECTING });
+      store.set(connectionAtom, { state: ConnectionState.CONNECTING });
     }
   } else {
     store.set(runtimeConfigAtom, {

package/src/plugins/core/__test__/registerReactComponent.test.ts

@@ -32,6 +32,61 @@ function makePlugin(tagName: string) {
   };
 }
 
+describe("stylesheet copying", () => {
+  afterEach(() => {
+    delete (Document.prototype as Partial<Document>).adoptedStyleSheets;
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  test.each([
+    {
+      name: "linked stylesheet",
+      href: "http://localhost/assets/index.css",
+      title: "marimo-linked-test",
+      expectedBaseURL: "http://localhost/assets/index.css",
+    },
+    {
+      name: "inline stylesheet",
+      href: null,
+      title: "marimo-inline-test",
+      expectedBaseURL: document.baseURI,
+    },
+  ])(
+    "preserves the base URL of a $name",
+    ({ href, title, expectedBaseURL }) => {
+      const constructedStyleSheet = {
+        replaceSync: vi.fn(),
+      } as unknown as CSSStyleSheet;
+      const constructor = vi.fn(function () {
+        return constructedStyleSheet;
+      });
+      constructor.prototype.replace = vi.fn();
+      vi.stubGlobal("CSSStyleSheet", constructor);
+      Object.defineProperty(Document.prototype, "adoptedStyleSheets", {
+        configurable: true,
+        value: [],
+      });
+
+      const source = {
+        cssRules: [],
+        href,
+        ownerNode: null,
+        title,
+      } as unknown as CSSStyleSheet;
+      vi.spyOn(document, "styleSheets", "get").mockReturnValue([
+        source,
+      ] as unknown as StyleSheetList);
+
+      const tag = uniqueTag("stylesheet-base-url");
+      registerReactComponent(makePlugin(tag));
+      document.createElement(tag);
+
+      expect(constructor).toHaveBeenCalledWith({ baseURL: expectedBaseURL });
+    },
+  );
+});
+
 describe("isCustomMarimoElement", () => {
   test("returns false for null", () => {
     expect(isCustomMarimoElement(null)).toBe(false);

package/src/plugins/core/registerReactComponent.tsx

@@ -519,7 +519,9 @@ export function registerReactComponent<T>(plugin: IPlugin<T, unknown>): void {
         if (!styleSheetCache.has(sheetUniqueKey)) {
           // We need to create a new stylesheet because we can't use the same
           // stylesheet otherwise the browser will throw an error.
-          const newSheet = new CSSStyleSheet();
+          const newSheet = new CSSStyleSheet({
+            baseURL: sheet.href ?? document.baseURI,
+          });
           try {
             newSheet.replaceSync(
               Array.from(sheet.cssRules)

package/src/plugins/impl/CheckboxPlugin.tsx

@@ -46,7 +46,7 @@ const CheckboxComponent = ({
   const id = useId();
 
   return (
-    <Labeled label={data.label} align="right" id={id}>
+    <Labeled label={data.label} align="right" controlId={id}>
       <Checkbox
         data-testid="marimo-plugin-checkbox"
         checked={value}

package/src/plugins/impl/DataTablePlugin.tsx

@@ -36,7 +36,12 @@ import { usePanelOwnership } from "@/components/data-table/hooks/use-panel-owner
 import { LoadingTable } from "@/components/data-table/loading-table";
 import {
   type DownloadAsArgs,
+  type DownloadAsFunction,
   DownloadAsSchema,
+  type DownloadGeoJSON,
+  DownloadGeoJSONSchema,
+  type GetExportMetadata,
+  GetExportMetadataSchema,
 } from "@/components/data-table/schemas";
 import { TableExplorerPanel } from "@/components/data-table/table-explorer-panel/table-explorer-panel";
 import {
@@ -209,7 +214,9 @@ interface Data<T> {
 
 // oxlint-disable-next-line typescript/consistent-type-definitions
 type DataTableFunctions = {
-  download_as: DownloadAsArgs;
+  download_as: DownloadAsFunction;
+  download_geojson: DownloadGeoJSON;
+  get_export_metadata: GetExportMetadata;
   get_column_summaries: <T>(opts: {}) => Promise<ColumnSummaries<T>>;
   search: <T>(req: {
     sort?: {
@@ -302,6 +309,8 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
   )
   .withFunctions<DataTableFunctions>({
     download_as: DownloadAsSchema,
+    download_geojson: DownloadGeoJSONSchema,
+    get_export_metadata: GetExportMetadataSchema,
     get_column_summaries: rpc.input(z.looseObject({})).output(
       z.object({
         data: z.union([z.string(), z.array(z.looseObject({}))]).nullable(),
@@ -839,7 +848,9 @@ const DataTableComponent = ({
   fieldTypes,
   paginationState,
   setPaginationState,
-  download_as: downloadAs,
+  download_as,
+  download_geojson,
+  get_export_metadata: getExportMetadata,
   columnSummaries,
   className,
   setValue,
@@ -880,6 +891,15 @@ const DataTableComponent = ({
     sizeBytesIsLoading?: boolean;
   }): JSX.Element => {
   const id = useId();
+  const downloadAs = useCallback<DownloadAsArgs>(
+    (request) => {
+      const { format, ...options } = request;
+      return format === "geojson"
+        ? download_geojson({ format, ...options })
+        : download_as({ format, ...options });
+    },
+    [download_as, download_geojson],
+  );
   const { locale } = useLocale();
   const [viewedRowIdx, setViewedRowIdx] = useState(0);
   const { isPanelOpen, isAnyPanelOpen, togglePanel, panelType, setPanelType } =
@@ -1168,6 +1188,7 @@ const DataTableComponent = ({
             hoverTemplate={hoverTemplate}
             cellHoverTexts={cellHoverTexts}
             downloadAs={showDownload ? downloadAs : undefined}
+            getExportMetadata={showDownload ? getExportMetadata : undefined}
             showSearch={showSearch}
             searchQuery={searchQuery}
             onSearchQueryChange={setSearchQuery}

package/src/plugins/impl/DatePickerPlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { type CalendarDate, parseDate } from "@internationalized/date";
-import type { JSX } from "react";
+import { type JSX, useId } from "react";
 import { z } from "zod";
 import { DatePicker } from "@/components/ui/date-picker";
 import type { IPlugin, IPluginProps, Setter } from "../types";
@@ -49,6 +49,7 @@ interface DatePickerProps extends Data {
 }
 
 const DatePickerComponent = (props: DatePickerProps): JSX.Element => {
+  const labelId = useId();
   const handleInput = (valueAsDate: CalendarDate | null) => {
     if (!valueAsDate) {
       return;
@@ -59,12 +60,13 @@ const DatePickerComponent = (props: DatePickerProps): JSX.Element => {
   };
 
   return (
-    <Labeled label={props.label} fullWidth={props.fullWidth}>
+    <Labeled labelId={labelId} label={props.label} fullWidth={props.fullWidth}>
       <DatePicker
         granularity="day"
         value={parseDate(props.value)}
         onChange={handleInput}
-        aria-label={props.label ?? "date picker"}
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={props.label ? undefined : "date picker"}
         minValue={parseDate(props.start)}
         maxValue={parseDate(props.stop)}
         isDisabled={props.disabled}

package/src/plugins/impl/DateRangePlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { type CalendarDate, parseDate } from "@internationalized/date";
-import type { JSX } from "react";
+import { type JSX, useId } from "react";
 import { z } from "zod";
 import { DateRangePicker } from "@/components/ui/date-picker";
 import type { IPlugin, IPluginProps, Setter } from "../types";
@@ -48,6 +48,7 @@ interface DateRangePickerProps extends Data {
 }
 
 const DateRangePickerComponent = (props: DateRangePickerProps): JSX.Element => {
+  const labelId = useId();
   const handleInput = (
     valueAsDateRange: {
       start: CalendarDate;
@@ -64,7 +65,7 @@ const DateRangePickerComponent = (props: DateRangePickerProps): JSX.Element => {
   };
 
   return (
-    <Labeled label={props.label} fullWidth={props.fullWidth}>
+    <Labeled labelId={labelId} label={props.label} fullWidth={props.fullWidth}>
       <DateRangePicker
         granularity="day"
         value={{
@@ -72,7 +73,8 @@ const DateRangePickerComponent = (props: DateRangePickerProps): JSX.Element => {
           end: parseDate(props.value[1]),
         }}
         onChange={handleInput}
-        aria-label={props.label ?? "date range picker"}
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={props.label ? undefined : "date range picker"}
         minValue={parseDate(props.start)}
         maxValue={parseDate(props.stop)}
         isDisabled={props.disabled}

package/src/plugins/impl/DateTimePickerPlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { type CalendarDateTime, parseDateTime } from "@internationalized/date";
-import type { JSX } from "react";
+import { type JSX, useId } from "react";
 import { z } from "zod";
 import { DatePicker } from "@/components/ui/date-picker";
 import type { IPlugin, IPluginProps, Setter } from "../types";
@@ -50,6 +50,7 @@ interface DateTimePickerProps extends Data {
 }
 
 const DateTimePickerComponent = (props: DateTimePickerProps): JSX.Element => {
+  const labelId = useId();
   const handleInput = (valueAsDateTime: CalendarDateTime | null) => {
     if (!valueAsDateTime) {
       return;
@@ -63,12 +64,13 @@ const DateTimePickerComponent = (props: DateTimePickerProps): JSX.Element => {
   const parsedValue = props.value ? parseDateTime(props.value) : undefined;
 
   return (
-    <Labeled label={props.label} fullWidth={props.fullWidth}>
+    <Labeled labelId={labelId} label={props.label} fullWidth={props.fullWidth}>
       <DatePicker
         granularity={props.precision}
         value={parsedValue}
         onChange={handleInput}
-        aria-label={props.label ?? "date time picker"}
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={props.label ? undefined : "date time picker"}
         minValue={parseDateTime(props.start)}
         maxValue={parseDateTime(props.stop)}
         isDisabled={props.disabled}

package/src/plugins/impl/DropdownPlugin.tsx

@@ -79,7 +79,7 @@ const Dropdown = (props: DropdownProps): JSX.Element => {
   const singleValue = value.length === 0 ? defaultValue : value[0];
 
   return (
-    <Labeled label={label} id={id} fullWidth={fullWidth}>
+    <Labeled label={label} controlId={id} fullWidth={fullWidth}>
       <NativeSelect
         data-testid="marimo-plugin-dropdown"
         onChange={(e) => {

package/src/plugins/impl/MultiselectPlugin.tsx

@@ -68,7 +68,7 @@ export const Multiselect = ({
   );
 
   return (
-    <Labeled label={label} id={id} fullWidth={fullWidth}>
+    <Labeled label={label} controlId={id} fullWidth={fullWidth}>
       <SelectList<string>
         id={id}
         options={items}

package/src/plugins/impl/NumberPlugin.tsx

@@ -70,7 +70,7 @@ const NumberComponent = (props: NumberComponentProps): JSX.Element => {
   };
 
   return (
-    <Labeled label={props.label} id={id} fullWidth={props.fullWidth}>
+    <Labeled label={props.label} controlId={id} fullWidth={props.fullWidth}>
       <NumberField
         data-testid="marimo-plugin-number-input"
         className={cn("min-w-[3em]", props.fullWidth && "w-full")}

package/src/plugins/impl/RadioPlugin.tsx

@@ -51,7 +51,11 @@ export const Radio = (props: RadioProps): JSX.Element => {
   const id = useId();
 
   return (
-    <Labeled label={props.label} id={id} align={props.inline ? "left" : "top"}>
+    <Labeled
+      label={props.label}
+      controlId={id}
+      align={props.inline ? "left" : "top"}
+    >
       <RadioGroup
         data-testid="marimo-plugin-radio"
         value={props.value ?? ""}

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -98,7 +98,7 @@ const RangeSliderComponent = ({
   const sliderElement = (
     <Labeled
       label={label}
-      id={id}
+      controlId={id}
       align={orientation === "horizontal" ? "left" : "top"}
       className={cn(fullWidth && "my-1 w-full")}
       fullWidth={fullWidth}

package/src/plugins/impl/SearchableSelect.tsx

@@ -33,7 +33,7 @@ export const SearchableSelect = (props: SearchableSelectProps): JSX.Element => {
   );
 
   return (
-    <Labeled label={label} id={id} fullWidth={fullWidth}>
+    <Labeled label={label} controlId={id} fullWidth={fullWidth}>
       <SelectList<string>
         id={id}
         options={items}

package/src/plugins/impl/SliderPlugin.tsx

@@ -224,7 +224,7 @@ const SliderComponent = ({
   const sliderElement = (
     <Labeled
       label={label}
-      id={id}
+      controlId={id}
       align={orientation === "horizontal" ? "left" : "top"}
       fullWidth={fullWidth}
       className={cn(fullWidth && "my-1 w-full")}

package/src/plugins/impl/SwitchPlugin.tsx

@@ -34,7 +34,12 @@ const SwitchComponent = ({
   const id = useId();
 
   return (
-    <Labeled label={data.label} align="right" id={id} labelClassName="ml-1">
+    <Labeled
+      label={data.label}
+      align="right"
+      controlId={id}
+      labelClassName="ml-1"
+    >
       <Switch
         data-testid="marimo-plugin-switch"
         checked={value}

package/src/plugins/impl/TextAreaPlugin.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { JSX } from "react";
+import { type JSX, useId } from "react";
 import { z } from "zod";
 import { cn } from "@/utils/cn";
 import {
@@ -56,6 +56,7 @@ interface TextAreaComponentProps extends Data {
 }
 
 const TextAreaComponent = (props: TextAreaComponentProps) => {
+  const textareaId = useId();
   const bottomAdornment = props.maxLength ? (
     <span className="text-muted-foreground text-xs font-medium">
       {props.value.length}/{props.maxLength}
@@ -64,8 +65,14 @@ const TextAreaComponent = (props: TextAreaComponentProps) => {
 
   if (props.debounce === true) {
     return (
-      <Labeled label={props.label} align="top" fullWidth={props.fullWidth}>
+      <Labeled
+        controlId={textareaId}
+        label={props.label}
+        align="top"
+        fullWidth={props.fullWidth}
+      >
         <OnBlurredTextarea
+          id={textareaId}
           className={cn("font-code", {
             "w-full": props.fullWidth,
           })}
@@ -86,8 +93,14 @@ const TextAreaComponent = (props: TextAreaComponentProps) => {
 
   if (typeof props.debounce === "number") {
     return (
-      <Labeled label={props.label} align="top" fullWidth={props.fullWidth}>
+      <Labeled
+        controlId={textareaId}
+        label={props.label}
+        align="top"
+        fullWidth={props.fullWidth}
+      >
         <DebouncedTextarea
+          id={textareaId}
           className={cn("font-code", {
             "w-full": props.fullWidth,
           })}
@@ -108,8 +121,14 @@ const TextAreaComponent = (props: TextAreaComponentProps) => {
   }
 
   return (
-    <Labeled label={props.label} align="top" fullWidth={props.fullWidth}>
+    <Labeled
+      controlId={textareaId}
+      label={props.label}
+      align="top"
+      fullWidth={props.fullWidth}
+    >
       <Textarea
+        id={textareaId}
         className={cn("font-code", {
           "w-full": props.fullWidth,
         })}

package/src/plugins/impl/TextInputPlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { AtSignIcon, GlobeIcon, LockIcon } from "lucide-react";
-import { type JSX, useRef, useState } from "react";
+import { type JSX, useId, useRef, useState } from "react";
 import { z } from "zod";
 import {
   DebouncedInput,
@@ -73,6 +73,7 @@ interface TextComponentProps extends Data {
 }
 
 const TextComponent = (props: TextComponentProps) => {
+  const inputId = useId();
   // Before first real keystroke: show masked placeholder, suppress setValue.
   // After first keystroke: normal password field.
   const initiallyMasked =
@@ -125,6 +126,7 @@ const TextComponent = (props: TextComponentProps) => {
   if (props.debounce === true) {
     input = (
       <OnBlurredInput
+        id={inputId}
         data-testid="marimo-plugin-text-input"
         type={props.kind}
         icon={icon[props.kind]}
@@ -143,6 +145,7 @@ const TextComponent = (props: TextComponentProps) => {
   } else if (typeof props.debounce === "number") {
     input = (
       <DebouncedInput
+        id={inputId}
         data-testid="marimo-plugin-text-input"
         type={props.kind}
         icon={icon[props.kind]}
@@ -163,6 +166,7 @@ const TextComponent = (props: TextComponentProps) => {
   } else {
     input = (
       <Input
+        id={inputId}
         data-testid="marimo-plugin-text-input"
         type={props.kind}
         icon={icon[props.kind]}
@@ -182,7 +186,11 @@ const TextComponent = (props: TextComponentProps) => {
   }
 
   return (
-    <Labeled label={props.label} fullWidth={props.fullWidth}>
+    <Labeled
+      controlId={inputId}
+      label={props.label}
+      fullWidth={props.fullWidth}
+    >
       {input}
     </Labeled>
   );

package/src/plugins/impl/__test__/text-labels.test.tsx

@@ -0,0 +1,141 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import type { IPlugin } from "../../types";
+import { TextInputPlugin } from "../TextInputPlugin";
+import { TextAreaPlugin } from "../TextAreaPlugin";
+
+function testLabelBehavior<D extends { label: string | null }>(
+  plugin: IPlugin<string, D>,
+) {
+  for (const debounce of [false, true, 200]) {
+    test(`${plugin.tagName} associates formatted label with debounce=${debounce}`, () => {
+      const setValue = vi.fn();
+      const props = {
+        host: document.createElement("div"),
+        value: "",
+        setValue,
+        functions: {},
+        data: plugin.validator.parse({
+          initialValue: "",
+          placeholder: "",
+          label: "<strong>Notes &amp; details</strong>",
+          debounce,
+        }),
+      };
+      const { rerender } = render(plugin.render(props));
+      const control = screen.getByLabelText("Notes & details");
+      expect(control).toHaveAccessibleName("Notes & details");
+      const id = control.id;
+      rerender(
+        plugin.render({
+          ...props,
+          data: { ...props.data, label: "Updated notes" },
+        }),
+      );
+      expect(screen.getByLabelText("Updated notes").id).toBe(id);
+      rerender(
+        plugin.render({ ...props, data: { ...props.data, label: null } }),
+      );
+      expect(control).toHaveAccessibleName("");
+    });
+    test(`${plugin.tagName} preserves commit timing with debounce=${debounce}`, () => {
+      vi.useFakeTimers();
+      try {
+        const setValue = vi.fn();
+        const props = {
+          host: document.createElement("div"),
+          value: "",
+          setValue,
+          functions: {},
+          data: plugin.validator.parse({
+            initialValue: "",
+            placeholder: "",
+            label: "Notes",
+            debounce,
+          }),
+        };
+        render(plugin.render(props));
+        const control = screen.getByLabelText("Notes");
+        if (debounce === false) {
+          fireEvent.input(control, { target: { value: "hello" } });
+        } else {
+          fireEvent.change(control, { target: { value: "hello" } });
+        }
+        const immediateCalls = debounce === false ? 1 : 0;
+        expect(setValue).toHaveBeenCalledTimes(immediateCalls);
+        act(() => vi.advanceTimersByTime(199));
+        expect(setValue).toHaveBeenCalledTimes(immediateCalls);
+        if (debounce === true) {
+          fireEvent.blur(control);
+        } else if (typeof debounce === "number") {
+          act(() => vi.advanceTimersByTime(1));
+        }
+        expect(setValue).toHaveBeenCalledWith("hello");
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+  }
+}
+
+for (const kind of ["text", "password", "email", "url"] as const) {
+  test(`native association preserves ${kind} input attributes`, () => {
+    const plugin = new TextInputPlugin();
+    render(
+      plugin.render({
+        host: document.createElement("div"),
+        value: "",
+        setValue: vi.fn(),
+        functions: {},
+        data: plugin.validator.parse({
+          initialValue: "",
+          placeholder: "",
+          label: "Account",
+          kind,
+          disabled: true,
+          minLength: 2,
+          maxLength: 30,
+        }),
+      }),
+    );
+    const control = screen.getByLabelText("Account");
+    expect(control).toHaveAttribute("type", kind);
+    expect(control).toBeDisabled();
+    expect(control).toBeRequired();
+    expect(control).toHaveAttribute("minlength", "2");
+    expect(control).toHaveAttribute("maxlength", "30");
+  });
+}
+
+function testMultipleInstances<D>(plugin: IPlugin<string, D>) {
+  test(`${plugin.tagName} keeps repeated labels independently associated`, () => {
+    const props = {
+      host: document.createElement("div"),
+      value: "",
+      setValue: vi.fn(),
+      functions: {},
+      data: plugin.validator.parse({
+        initialValue: "",
+        placeholder: "",
+        label: "Notes",
+      }),
+    };
+    render(
+      <>
+        {plugin.render(props)}
+        {plugin.render(props)}
+      </>,
+    );
+    const controls = screen.getAllByLabelText("Notes");
+    expect(controls).toHaveLength(2);
+    expect(controls[0].id).not.toBe(controls[1].id);
+    expect(controls[0]).toHaveAccessibleName("Notes");
+    expect(controls[1]).toHaveAccessibleName("Notes");
+  });
+}
+
+testLabelBehavior(new TextInputPlugin());
+testLabelBehavior(new TextAreaPlugin());
+testMultipleInstances(new TextInputPlugin());
+testMultipleInstances(new TextAreaPlugin());