@marimo-team/islands 0.25.2-dev0 → 0.25.2-dev100

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/FileBrowserPlugin.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { type LucideIcon, CornerLeftUp } from "lucide-react";
+import { type LucideIcon, ChevronRightIcon, CornerLeftUp } from "lucide-react";
 import { type JSX, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { z } from "zod";
 import {
@@ -12,7 +12,6 @@ import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
-import { NativeSelect } from "@/components/ui/native-select";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 import { toast } from "@/components/ui/use-toast";
 import { RANDOM_ID_ATTR } from "@/core/dom/ui-element-constants";
@@ -472,12 +471,19 @@ export const FileBrowser = ({
   //
   // Assumes that path contains at least one delimiter, which is true
   // only if this is an absolute path.
-  const { parentDirectories } = getProtocolAndParentDirectories({
+  const { protocol, parentDirectories } = getProtocolAndParentDirectories({
     path,
     delimiter,
     initialPath,
     restrictNavigation,
   });
+  const breadcrumbs = parentDirectories.toReversed().map((dir) => ({
+    path: dir,
+    name:
+      dir === protocol
+        ? protocol
+        : (dir.split(delimiter).findLast(Boolean) ?? dir),
+  }));
 
   const selectionKindLabel =
     selectionMode === "all"
@@ -515,18 +521,42 @@ export const FileBrowser = ({
     <div>
       {error && <Banner kind="danger">{error.message}</Banner>}
       {renderHeader()}
-      <NativeSelect
-        className="mt-2 w-full"
-        placeholder={path}
-        value={path}
-        onChange={(e) => setNewPath(e.target.value)}
-      >
-        {parentDirectories.map((dir) => (
-          <option value={dir} key={dir}>
-            {dir}
-          </option>
-        ))}
-      </NativeSelect>
+      <nav aria-label="Current directory" className="mt-2">
+        <ol className="flex flex-wrap items-center gap-0.5 text-sm">
+          {breadcrumbs.map((crumb, index) => {
+            const isCurrent = index === breadcrumbs.length - 1;
+            return (
+              <li key={crumb.path} className="flex items-center gap-0.5">
+                {index > 0 && (
+                  <ChevronRightIcon
+                    size={14}
+                    className="text-muted-foreground shrink-0"
+                    aria-hidden={true}
+                  />
+                )}
+                <button
+                  type="button"
+                  title={crumb.path}
+                  aria-current={isCurrent ? "page" : undefined}
+                  onClick={() => {
+                    if (!isCurrent) {
+                      setNewPath(crumb.path);
+                    }
+                  }}
+                  className={cn(
+                    "rounded px-1 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
+                    isCurrent
+                      ? "font-medium cursor-default"
+                      : "text-muted-foreground hover:bg-accent hover:text-foreground",
+                  )}
+                >
+                  {crumb.name}
+                </button>
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
 
       {data && typeof data.total_count === "number" && (
         <div className="text-xs text-muted-foreground mt-1 px-1">

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

@@ -152,6 +152,7 @@ const SliderComponent = ({
   disabled,
 }: SliderProps): JSX.Element => {
   const id = useId();
+  const labelId = useId();
   const { locale } = useLocale();
 
   // Hold internal value
@@ -224,7 +225,8 @@ const SliderComponent = ({
   const sliderElement = (
     <Labeled
       label={label}
-      id={id}
+      controlId={id}
+      labelId={labelId}
       align={orientation === "horizontal" ? "left" : "top"}
       fullWidth={fullWidth}
       className={cn(fullWidth && "my-1 w-full")}
@@ -238,6 +240,8 @@ const SliderComponent = ({
       >
         <Slider
           id={id}
+          aria-labelledby={label ? labelId : undefined}
+          aria-label={label ? undefined : "Slider"}
           className={cn(
             "relative flex items-center select-none",
             !fullWidth && "data-[orientation=horizontal]:w-36 ",

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