@marimo-team/frontend 0.23.2-dev8 → 0.23.2

package/src/core/wasm/worker/worker.ts

@@ -369,6 +369,7 @@ const namesThatRequireSync = new Set<keyof RawBridge>([
   "rename_file",
   "create_file_or_directory",
   "delete_file_or_directory",
+  "copy_file_or_directory",
   "move_file_or_directory",
   "update_file",
 ]);

package/src/plugins/core/__test__/trusted-url.test.ts

@@ -1,5 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { hasRunAnyCellAtom } from "@/components/editor/cell/useRunCells";
+import { store } from "@/core/state/jotai";
 import { isTrustedVirtualFileUrl } from "../trusted-url";
 
 describe("isTrustedVirtualFileUrl", () => {
@@ -45,4 +47,46 @@ describe("isTrustedVirtualFileUrl", () => {
     expect(isTrustedVirtualFileUrl(42)).toBe(false);
     expect(isTrustedVirtualFileUrl({})).toBe(false);
   });
+
+  describe("data URL exemption", () => {
+    let previousHasRunAnyCell: boolean;
+
+    beforeEach(() => {
+      previousHasRunAnyCell = store.get(hasRunAnyCellAtom);
+      store.set(hasRunAnyCellAtom, true);
+    });
+
+    afterEach(() => {
+      store.set(hasRunAnyCellAtom, previousHasRunAnyCell);
+    });
+
+    it.each([
+      "data:text/javascript;base64,ZXhwb3J0IGRlZmF1bHQge30=",
+      "data:application/javascript;base64,ZXhwb3J0IGRlZmF1bHQge30=",
+      "data:text/css;base64,Ym9keXt9",
+    ])("accepts safe data URL %s after a cell has run", (url) => {
+      expect(isTrustedVirtualFileUrl(url)).toBe(true);
+    });
+
+    it.each([
+      // Non-base64 data URLs are refused
+      "data:text/javascript,alert(1)",
+      "data:text/javascript;charset=utf-8,alert(1)",
+      // HTML / SVG / arbitrary types are refused
+      "data:text/html;base64,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg==",
+      "data:image/svg+xml;base64,PHN2Zy8+",
+      "data:application/octet-stream;base64,AAA=",
+    ])("still rejects unsafe data URL %s", (url) => {
+      expect(isTrustedVirtualFileUrl(url)).toBe(false);
+    });
+
+    it("rejects data URL when no cell has been run", () => {
+      store.set(hasRunAnyCellAtom, false);
+      expect(
+        isTrustedVirtualFileUrl(
+          "data:text/javascript;base64,ZXhwb3J0IGRlZmF1bHQge30=",
+        ),
+      ).toBe(false);
+    });
+  });
 });

package/src/plugins/core/trusted-url.ts

@@ -1,20 +1,45 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { hasRunAnyCellAtom } from "@/components/editor/cell/useRunCells";
+import { store } from "@/core/state/jotai";
+
 /**
  * Whether a URL can be trusted to point at a marimo-served virtual file.
  *
  * Plugins that load remote scripts or stylesheets (e.g. MplInteractive, Panel)
  * must call this before turning a plugin-supplied URL into a `<script src>` or
- * `<link href>`. The backend always serializes these URLs as virtual file
+ * `<link href>`. The backend normally serializes these URLs as virtual file
  * paths of the form `./@file/<byte_length>-<filename>` (see
  * `VirtualFile.create_and_register`). Accepting anything else would let a
  * maliciously crafted `<marimo-*>` element embedded in markdown load
  * attacker-controlled JavaScript at same origin, since the HTML sanitizer
  * lets arbitrary marimo custom elements and attributes through.
+ *
+ * Some runtimes (WASM, VS Code) have no backend to serve virtual files, so
+ * `VirtualFile` falls back to inline base64 data URLs (see `virtual_file.py`).
+ * We accept those only once the user has explicitly run a cell in the current
+ * notebook — the same trust signal `sanitize.ts` uses to lift HTML
+ * sanitization. Running a cell requires deliberate user action and already
+ * executes arbitrary Python, so a data URL script loaded afterwards is not a
+ * new attack surface.
  */
 export function isTrustedVirtualFileUrl(url: unknown): url is string {
   if (typeof url !== "string" || url.length === 0) {
     return false;
   }
-  return /^(\.?\/)?@file\/[^?#]+$/.test(url);
+  if (/^(\.?\/)?@file\/[^?#]+$/.test(url)) {
+    return true;
+  }
+  if (isSafeDataUrl(url) && store.get(hasRunAnyCellAtom)) {
+    return true;
+  }
+  return false;
+}
+
+function isSafeDataUrl(url: string): boolean {
+  return (
+    url.startsWith("data:text/javascript;base64,") ||
+    url.startsWith("data:application/javascript;base64,") ||
+    url.startsWith("data:text/css;base64,")
+  );
 }

package/src/plugins/impl/DataEditorPlugin.tsx

@@ -83,19 +83,23 @@ interface Props extends Omit<
 
 const LoadingDataEditor = (props: Props) => {
   const [data, setData] = useState<unknown[]>([]);
-  const [columnFields, setColumnFields] = useState<FieldTypes>({});
+  const [columnFields, setColumnFields] = useState<FieldTypes>(new Map());
 
   // Load the data
   const { error } = useAsyncData(async () => {
     const withoutExternalTypes = toFieldTypes(props.fieldTypes ?? []);
 
     // If we already have the data, return it
-    // Otherwise, load the data from the URL
+    // Otherwise, load the data from the URL. Vega's CSV parser takes a
+    // plain `Record`; column order doesn't matter for parsing.
     const localData = Array.isArray(props.data)
       ? props.data
       : await vegaLoadData(
           props.data,
-          { type: "csv", parse: getVegaFieldTypes(withoutExternalTypes) },
+          {
+            type: "csv",
+            parse: getVegaFieldTypes(Object.fromEntries(withoutExternalTypes)),
+          },
           { handleBigIntAndNumberLike: true },
         );
 

package/src/plugins/impl/DataTablePlugin.tsx

@@ -28,10 +28,7 @@ import { TablePanel } from "@/components/data-table/charts/charts";
 import { hasChart } from "@/components/data-table/charts/storage";
 import { ColumnChartSpecModel } from "@/components/data-table/column-summary/chart-spec-model";
 import { ColumnChartContext } from "@/components/data-table/column-summary/column-summary";
-import {
-  type ColumnFilterValue,
-  filterToFilterCondition,
-} from "@/components/data-table/filters";
+import { filtersToFilterGroup } from "@/components/data-table/filters";
 import { usePanelOwnership } from "@/components/data-table/hooks/use-panel-ownership";
 import { LoadingTable } from "@/components/data-table/loading-table";
 import {
@@ -86,8 +83,8 @@ import { rpc } from "../core/rpc";
 import { Banner } from "./common/error-banner";
 import { Labeled } from "./common/labeled";
 import {
-  ConditionSchema,
-  type ConditionType,
+  FilterGroupSchema,
+  type FilterGroupType,
   columnToFieldTypesSchema,
 } from "./data-frames/schema";
 
@@ -213,7 +210,7 @@ type DataTableFunctions = {
       descending: boolean;
     }[];
     query?: string;
-    filters?: ConditionType[];
+    filters?: FilterGroupType;
     page_number: number;
     page_size: number;
     max_columns?: number | null;
@@ -312,7 +309,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
             )
             .optional(),
           query: z.string().optional(),
-          filters: z.array(ConditionSchema).optional(),
+          filters: FilterGroupSchema.optional(),
           page_number: z.number(),
           page_size: z.number(),
           max_columns: z.number().nullable().optional(),
@@ -578,12 +575,7 @@ export const LoadingDataTableComponent = memo(
         query: searchQuery,
         page_number: paginationState.pageIndex,
         page_size: paginationState.pageSize,
-        filters: filters.flatMap((filter) => {
-          return filterToFilterCondition(
-            filter.id,
-            filter.value as ColumnFilterValue,
-          );
-        }),
+        filters: filtersToFilterGroup(filters),
       });
 
       if (canShowInitialPage) {
@@ -641,12 +633,7 @@ export const LoadingDataTableComponent = memo(
           page_size: 1,
           sort: sortArgs,
           query: searchQuery,
-          filters: filters.flatMap((filter) => {
-            return filterToFilterCondition(
-              filter.id,
-              filter.value as ColumnFilterValue,
-            );
-          }),
+          filters: filtersToFilterGroup(filters),
           // Do not clamp number of columns since we are viewing a single row
           max_columns: null,
         });

package/src/plugins/impl/FileBrowserPlugin.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { CornerLeftUp } from "lucide-react";
+import { type LucideIcon, CornerLeftUp } from "lucide-react";
 import { type JSX, useEffect, useState } from "react";
 import { z } from "zod";
 import {
@@ -128,6 +128,43 @@ interface FileBrowserProps extends Data, PluginFunctions {
   host: HTMLElement;
 }
 
+interface CheckboxOrIconProps {
+  isSelected: boolean;
+  canSelect: boolean;
+  Icon: LucideIcon;
+  onSelect: () => void;
+}
+
+function CheckboxOrIcon({
+  isSelected,
+  canSelect,
+  Icon,
+  onSelect,
+}: CheckboxOrIconProps) {
+  if (canSelect) {
+    return (
+      <>
+        <Checkbox
+          checked={isSelected}
+          onClick={(e) => {
+            onSelect();
+            e.stopPropagation();
+          }}
+          className={cn({ "hidden group-hover:flex": !isSelected })}
+        />
+        <Icon
+          size={16}
+          className={cn("mr-2", {
+            hidden: isSelected,
+            "group-hover:hidden": !isSelected,
+          })}
+        />
+      </>
+    );
+  }
+  return <Icon size={16} className="mr-2" />;
+}
+
 /**
  * File browser component.
  *
@@ -145,7 +182,6 @@ export const FileBrowser = ({
   host,
 }: FileBrowserProps): JSX.Element | null => {
   const [path, setPath] = useInternalStateWithSync(initialPath);
-  const [selectAllLabel, setSelectAllLabel] = useState("Select all");
   const [isUpdatingPath, setIsUpdatingPath] = useState(false);
   const [showLoadingOverlay, setShowLoadingOverlay] = useState(false);
 
@@ -158,7 +194,6 @@ export const FileBrowser = ({
   const { data, error, isPending } = useAsyncData(() => {
     return list_directory({ path: path });
   }, [path, randomId]);
-  const spinnerLabel = "Listing files...";
 
   useEffect(() => {
     if (!isPending) {
@@ -175,25 +210,29 @@ export const FileBrowser = ({
     };
   }, [isPending]);
 
+  const files = data?.files ?? [];
+  const selectedPaths = new Set(value.map((x) => x.path));
+  const canSelectDirectories =
+    selectionMode === "directory" || selectionMode === "all";
+  const canSelectFiles = selectionMode === "file" || selectionMode === "all";
+
+  const selectable = files.filter(
+    (f) =>
+      (canSelectDirectories && f.is_directory) ||
+      (canSelectFiles && !f.is_directory),
+  );
+  const allSelected =
+    selectable.length > 0 && selectable.every((f) => selectedPaths.has(f.path));
+
   if (!data && error) {
     return <Banner kind="danger">{error.message}</Banner>;
   }
 
-  let { files } = data || {};
-  if (files === undefined) {
-    files = [];
-  }
-
   const pathBuilder = PathBuilder.guessDeliminator(initialPath);
   const delimiter = pathBuilder.deliminator;
 
-  const selectedPaths = new Set(value.map((x) => x.path));
   const selectedFiles = value.map((x) => <li key={x.id}>{x.path}</li>);
 
-  const canSelectDirectories =
-    selectionMode === "directory" || selectionMode === "all";
-  const canSelectFiles = selectionMode === "file" || selectionMode === "all";
-
   function setNewPath(newPath: string) {
     // Prevent updating path while updating
     if (isUpdatingPath) {
@@ -230,9 +269,7 @@ export const FileBrowser = ({
       return;
     }
 
-    // Update path and reset select all label
     setPath(newPath);
-    setSelectAllLabel("Select all");
     setIsUpdatingPath(false);
   }
 
@@ -264,28 +301,18 @@ export const FileBrowser = ({
   }) {
     const fileInfo = createFileInfo({ path, name, isDirectory });
 
-    if (multiple) {
-      if (selectedPaths.has(path)) {
-        setValue(value.filter((x) => x.path !== path));
-        setSelectAllLabel("Select all");
-      } else {
-        setValue([...value, fileInfo]);
-      }
+    if (selectedPaths.has(path)) {
+      setValue(value.filter((x) => x.path !== path));
     } else {
-      setValue([fileInfo]);
+      setValue(multiple ? [...value, fileInfo] : [fileInfo]);
     }
   }
 
   function deselectAllFiles() {
     setValue(value.filter((x) => Paths.dirname(x.path) !== path));
-    setSelectAllLabel("Select all");
   }
 
   function selectAllFiles() {
-    if (!files) {
-      return;
-    }
-
     const filesInView: FileInfo[] = [];
 
     for (const file of files) {
@@ -304,7 +331,6 @@ export const FileBrowser = ({
     }
 
     setValue([...value, ...filesInView]);
-    setSelectAllLabel("Deselect all");
   }
 
   // Create rows for directories and files
@@ -313,7 +339,7 @@ export const FileBrowser = ({
   // Parent directory ".." row button
   fileRows.push(
     <TableRow
-      className="hover:bg-primary hover:bg-opacity-25 select-none"
+      className="hover:bg-accent select-none"
       key={"Parent directory"}
       onClick={() => setNewPath(PARENT_DIRECTORY)}
     >
@@ -344,50 +370,13 @@ export const FileBrowser = ({
     const Icon = FILE_TYPE_ICONS[fileType];
 
     const isSelected = selectedPaths.has(filePath);
-    const renderCheckboxOrIcon = () => {
-      if (
-        (canSelectDirectories && file.is_directory) ||
-        (canSelectFiles && !file.is_directory)
-      ) {
-        return (
-          <>
-            <Checkbox
-              checked={isSelected}
-              onClick={(e) => {
-                handleSelection({
-                  path: filePath,
-                  name: file.name,
-                  isDirectory: file.is_directory,
-                });
-                e.stopPropagation();
-              }}
-              className={cn("", {
-                "hidden group-hover:flex": !isSelected,
-              })}
-            />
-            <Icon
-              size={16}
-              className={cn("mr-2", {
-                hidden: isSelected,
-                "group-hover:hidden": !isSelected,
-              })}
-            />
-          </>
-        );
-      }
-
-      return <Icon size={16} className="mr-2" />;
-    };
 
     fileRows.push(
       <TableRow
         key={file.id}
-        className={cn(
-          "hover:bg-primary hover:bg-opacity-25 group select-none",
-          {
-            "bg-primary bg-opacity-25": isSelected,
-          },
-        )}
+        className={cn("hover:bg-accent group select-none", {
+          "bg-primary/25 hover:bg-primary/35": isSelected,
+        })}
         onClick={() =>
           handleClick({
             path: filePath,
@@ -397,7 +386,21 @@ export const FileBrowser = ({
         }
       >
         <TableCell className="w-[50px] pl-4">
-          {renderCheckboxOrIcon()}
+          <CheckboxOrIcon
+            isSelected={isSelected}
+            canSelect={
+              (canSelectDirectories && file.is_directory) ||
+              (canSelectFiles && !file.is_directory)
+            }
+            Icon={Icon}
+            onSelect={() =>
+              handleSelection({
+                path: filePath,
+                name: file.name,
+                isDirectory: file.is_directory,
+              })
+            }
+          />
         </TableCell>
         <TableCell>{file.name}</TableCell>
       </TableRow>,
@@ -423,8 +426,9 @@ export const FileBrowser = ({
         : PluralWords.of("file");
 
   const renderHeader = () => {
-    label = label ?? `Select ${selectionKindLabel.join(" and ", 2)}...`;
-    const labelText = <Label>{renderHTML({ html: label })}</Label>;
+    const displayLabel =
+      label ?? `Select ${selectionKindLabel.join(" and ", 2)}...`;
+    const labelText = <Label>{renderHTML({ html: displayLabel })}</Label>;
 
     if (multiple) {
       return (
@@ -434,13 +438,9 @@ export const FileBrowser = ({
             <Button
               size="xs"
               variant="link"
-              onClick={
-                selectAllLabel === "Select all"
-                  ? () => selectAllFiles()
-                  : () => deselectAllFiles()
-              }
+              onClick={allSelected ? deselectAllFiles : selectAllFiles}
             >
-              {renderHTML({ html: selectAllLabel })}
+              {allSelected ? "Deselect all" : "Select all"}
             </Button>
           </div>
         </div>
@@ -461,7 +461,7 @@ export const FileBrowser = ({
         onChange={(e) => setNewPath(e.target.value)}
       >
         {parentDirectories.map((dir) => (
-          <option value={dir} key={dir} selected={dir === path}>
+          <option value={dir} key={dir}>
             {dir}
           </option>
         ))}
@@ -487,7 +487,7 @@ export const FileBrowser = ({
             role="status"
           >
             <Spinner size="small" />
-            <span>{spinnerLabel}</span>
+            <span>Listing files...</span>
           </div>
         )}
         <Table className="cursor-pointer table-fixed">

package/src/plugins/impl/TabsPlugin.tsx

@@ -9,12 +9,14 @@ import {
 } from "../../components/ui/tabs";
 import { renderHTML } from "../core/RenderHTML";
 import type { IPlugin, IPluginProps } from "../types";
+import { Labeled } from "./common/labeled";
 
 interface Data {
   /**
    * The labels for each tab; raw HTML.
    */
   tabs: string[];
+  label: string | null;
 }
 
 // Selected tab index
@@ -25,6 +27,7 @@ export class TabsPlugin implements IPlugin<T, Data> {
 
   validator = z.object({
     tabs: z.array(z.string()),
+    label: z.string().nullable(),
   });
 
   render(props: IPluginProps<T, Data>): JSX.Element {
@@ -47,6 +50,7 @@ interface TabComponentProps extends Data {
 
 const TabComponent = ({
   tabs,
+  label,
   value,
   setValue,
   children,
@@ -67,17 +71,19 @@ const TabComponent = ({
   }
 
   return (
-    <Tabs value={internalValue} onValueChange={handleChange}>
-      <TabsList>
-        {tabs.map((tab, index) => (
-          <TabsTrigger key={index} value={index.toString()}>
-            {renderHTML({ html: tab })}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-      {React.Children.map(children, (child, index) => {
-        return <TabsContent value={index.toString()}>{child}</TabsContent>;
-      })}
-    </Tabs>
+    <Labeled label={label} align="top">
+      <Tabs value={internalValue} onValueChange={handleChange}>
+        <TabsList>
+          {tabs.map((tab, index) => (
+            <TabsTrigger key={index} value={index.toString()}>
+              {renderHTML({ html: tab })}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {React.Children.map(children, (child, index) => {
+          return <TabsContent value={index.toString()}>{child}</TabsContent>;
+        })}
+      </Tabs>
+    </Labeled>
   );
 };