@marimo-team/frontend 0.21.2-dev1 → 0.21.2-dev101

package/src/plugins/impl/DataTablePlugin.tsx

@@ -26,7 +26,6 @@ import type { CellSelectionState } from "@/components/data-table/cell-selection/
 import type { CellStyleState } from "@/components/data-table/cell-styling/types";
 import { TablePanel } from "@/components/data-table/charts/charts";
 import { hasChart } from "@/components/data-table/charts/storage";
-import { ColumnExplorerPanel } from "@/components/data-table/column-explorer-panel/column-explorer";
 import { ColumnChartSpecModel } from "@/components/data-table/column-summary/chart-spec-model";
 import { ColumnChartContext } from "@/components/data-table/column-summary/column-summary";
 import {
@@ -35,11 +34,11 @@ import {
 } from "@/components/data-table/filters";
 import { usePanelOwnership } from "@/components/data-table/hooks/use-panel-ownership";
 import { LoadingTable } from "@/components/data-table/loading-table";
-import { RowViewerPanel } from "@/components/data-table/row-viewer-panel/row-viewer";
 import {
   type DownloadAsArgs,
   DownloadAsSchema,
 } from "@/components/data-table/schemas";
+import { TableExplorerPanel } from "@/components/data-table/table-explorer-panel/table-explorer-panel";
 import {
   type BinValues,
   type ColumnHeaderStats,
@@ -53,6 +52,7 @@ import {
 } from "@/components/data-table/types";
 import {
   getPageIndexForRow,
+  loadTableAndRawData,
   loadTableData,
 } from "@/components/data-table/utils";
 import { ErrorBoundary } from "@/components/editor/boundary/ErrorBoundary";
@@ -174,6 +174,7 @@ const valueCounts: z.ZodType<ValueCounts> = z.array(
 interface Data<T> {
   label: string | null;
   data: TableData<T>;
+  rawData?: TableData<T> | null;
   totalRows: number | TooManyRows;
   pagination: boolean;
   pageSize: number;
@@ -199,7 +200,6 @@ interface Data<T> {
   hasStableRowId: boolean;
   lazy: boolean;
   cellHoverTexts?: Record<string, Record<string, string | null>> | null;
-  downloadFileName?: string;
 }
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -221,6 +221,7 @@ type DataTableFunctions = {
     total_rows: number | TooManyRows;
     cell_styles?: CellStyleState | null;
     cell_hover_texts?: Record<string, Record<string, string | null>> | null;
+    raw_data?: TableData<T> | null;
   }>;
   get_data_url?: GetDataUrl;
   get_row_ids?: GetRowIds;
@@ -243,6 +244,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       ]),
       label: z.string().nullable(),
       data: z.union([z.string(), z.array(z.object({}).passthrough())]),
+      rawData: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
       totalRows: z.union([z.number(), z.literal(TOO_MANY_ROWS)]),
       pagination: z.boolean().default(false),
       pageSize: z.number().default(10),
@@ -283,7 +285,6 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       // If lazy, this will preload the first page of data
       // without user confirmation.
       preload: z.boolean().default(false),
-      downloadFileName: z.string().optional(),
     }),
   )
   .withFunctions<DataTableFunctions>({
@@ -327,6 +328,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
             )
             .nullable(),
           cell_hover_texts: cellHoverTextSchema.nullable(),
+          raw_data: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
         }),
       ),
     get_row_ids: rpc.input(z.object({}).passthrough()).output(
@@ -529,17 +531,23 @@ export const LoadingDataTableComponent = memo(
     // Data loading
     const { data, error, isPending, isFetching } = useAsyncData<{
       rows: T[];
+      rawRows?: T[];
       totalRows: number | TooManyRows;
       cellStyles: CellStyleState | undefined | null;
       cellHoverTexts?: Record<string, Record<string, string | null>> | null;
     }>(async () => {
       // If there is no data, return an empty array
       if (props.totalRows === 0) {
-        return { rows: Arrays.EMPTY, totalRows: 0, cellStyles: {} };
+        return {
+          rows: Arrays.EMPTY,
+          totalRows: 0,
+          cellStyles: {},
+        };
       }
 
       // Table data is a url string or an array of objects
       let tableData = props.data;
+      let rawTableData: TableData<T> | undefined | null = props.rawData;
       let totalRows = props.totalRows;
       let cellStyles = props.cellStyles;
       let cellHoverTexts = props.cellHoverTexts;
@@ -587,13 +595,19 @@ export const LoadingDataTableComponent = memo(
       } else {
         const searchResults = await searchResultsPromise;
         tableData = searchResults.data;
+        rawTableData = searchResults.raw_data;
         totalRows = searchResults.total_rows;
         cellStyles = searchResults.cell_styles || {};
         cellHoverTexts = searchResults.cell_hover_texts || {};
       }
-      tableData = await loadTableData(tableData);
+      const [data, rawData] = await loadTableAndRawData(
+        tableData,
+        rawTableData,
+      );
+      tableData = data;
       return {
         rows: tableData,
+        rawRows: rawData,
         totalRows: totalRows,
         cellStyles,
         cellHoverTexts,
@@ -715,6 +729,7 @@ export const LoadingDataTableComponent = memo(
       <DataTableComponent
         {...props}
         data={data?.rows ?? Arrays.EMPTY}
+        rawData={data?.rawRows}
         columnSummaries={columnSummaries}
         sorting={sorting}
         setSorting={setSorting}
@@ -766,6 +781,7 @@ LoadingDataTableComponent.displayName = "LoadingDataTableComponent";
 const DataTableComponent = ({
   label,
   data,
+  rawData,
   totalRows,
   maxColumns,
   pagination,
@@ -804,7 +820,6 @@ const DataTableComponent = ({
   cellStyles,
   hoverTemplate,
   cellHoverTexts,
-  downloadFileName,
   toggleDisplayHeader,
   calculate_top_k_rows,
   preview_column,
@@ -814,12 +829,14 @@ const DataTableComponent = ({
 }: DataTableProps<unknown> &
   DataTableSearchProps & {
     data: unknown[];
+    rawData?: unknown[];
     columnSummaries?: ColumnSummaries;
     getRow: (rowIdx: number) => Promise<GetRowResult>;
   }): JSX.Element => {
   const id = useId();
   const [viewedRowIdx, setViewedRowIdx] = useState(0);
-  const { isPanelOpen, togglePanel } = usePanelOwnership(id, cellId);
+  const { isPanelOpen, isAnyPanelOpen, togglePanel, panelType, setPanelType } =
+    usePanelOwnership(id, cellId);
 
   const chartSpecModel = useMemo(() => {
     if (!columnSummaries) {
@@ -854,10 +871,35 @@ const DataTableComponent = ({
     return memoizedUnclampedFieldTypes.slice(0, maxColumns);
   }, [maxColumns, memoizedUnclampedFieldTypes]);
 
+  // Compute max fractional digits per numeric column for consistent formatting.
+  const computedFractionDigits = useMemo(() => {
+    const result: Record<string, number> = {};
+    if (data && data.length > 0) {
+      for (const [colName, types] of memoizedClampedFieldTypes) {
+        if (types[0] === "number") {
+          let maxDecimals = 0;
+          for (const row of data) {
+            const val = (row as Record<string, unknown>)[colName];
+            if (typeof val === "number" && Number.isFinite(val)) {
+              const str = String(val);
+              const dotIdx = str.indexOf(".");
+              if (dotIdx !== -1) {
+                maxDecimals = Math.max(maxDecimals, str.length - dotIdx - 1);
+              }
+            }
+          }
+          result[colName] = maxDecimals;
+        }
+      }
+    }
+    return result;
+  }, [data, memoizedClampedFieldTypes]);
+
   const memoizedRowHeaders = useDeepCompareMemoize(rowHeaders);
   const memoizedTextJustifyColumns = useDeepCompareMemoize(textJustifyColumns);
   const memoizedWrappedColumns = useDeepCompareMemoize(wrappedColumns);
   const memoizedChartSpecModel = useDeepCompareMemoize(chartSpecModel);
+  const fractionDigitsByColumn = useDeepCompareMemoize(computedFractionDigits);
   const shownColumns = memoizedClampedFieldTypes.length;
 
   // If the field types are not set, we don't show them
@@ -878,6 +920,7 @@ const DataTableComponent = ({
         // Only show data types if they are explicitly set
         showDataTypes: showDataTypes,
         calculateTopKRows: calculate_top_k_rows,
+        fractionDigitsByColumn: fractionDigitsByColumn,
       }),
     [
       selection,
@@ -889,6 +932,7 @@ const DataTableComponent = ({
       memoizedWrappedColumns,
       headerTooltip,
       calculate_top_k_rows,
+      fractionDigitsByColumn,
     ],
   );
 
@@ -955,8 +999,7 @@ const DataTableComponent = ({
   );
 
   const isSelectable = selection === "multi" || selection === "single";
-  const showColExplorer =
-    showColumnExplorer && preview_column && isPanelOpen("column-explorer");
+  const canShowColumnExplorer = showColumnExplorer && !!preview_column;
 
   const isInVscode = isInVscodeExtension();
 
@@ -985,28 +1028,24 @@ const DataTableComponent = ({
         </Banner>
       )}
 
-      {isPanelOpen("row-viewer") && (
+      {isAnyPanelOpen && (showRowExplorer || canShowColumnExplorer) && (
         <ContextAwarePanelItem>
-          <RowViewerPanel
-            getRow={getRow}
-            fieldTypes={memoizedUnclampedFieldTypes}
-            totalRows={totalRows}
+          <TableExplorerPanel
             rowIdx={viewedRowIdx}
             setRowIdx={setViewedRow}
+            totalRows={totalRows}
+            fieldTypes={memoizedUnclampedFieldTypes}
+            getRow={getRow}
             isSelectable={isSelectable}
-            isRowSelected={rowSelection[viewedRowIdx]}
+            isRowSelected={Boolean(rowSelection[viewedRowIdx])}
             handleRowSelectionChange={handleRowSelectionChange}
-          />
-        </ContextAwarePanelItem>
-      )}
-      {showColExplorer && (
-        <ContextAwarePanelItem>
-          <ColumnExplorerPanel
             previewColumn={preview_column}
-            fieldTypes={memoizedUnclampedFieldTypes}
-            totalRows={totalRows}
             totalColumns={totalColumns}
             tableId={id}
+            showRowExplorer={showRowExplorer && !isInVscode}
+            showColumnExplorer={canShowColumnExplorer && !isInVscode}
+            activeTab={panelType}
+            onTabChange={setPanelType}
           />
         </ContextAwarePanelItem>
       )}
@@ -1015,6 +1054,7 @@ const DataTableComponent = ({
         <Labeled label={label} align="top" fullWidth={true}>
           <DataTable
             data={data}
+            rawData={rawData}
             columns={columns}
             className={className}
             maxHeight={maxHeight}
@@ -1034,7 +1074,6 @@ const DataTableComponent = ({
             hoverTemplate={hoverTemplate}
             cellHoverTexts={cellHoverTexts}
             downloadAs={showDownload ? downloadAs : undefined}
-            downloadFileName={downloadFileName}
             enableSearch={enableSearch}
             searchQuery={searchQuery}
             onSearchQueryChange={setSearchQuery}
@@ -1051,11 +1090,13 @@ const DataTableComponent = ({
             showChartBuilder={showChartBuilder}
             showPageSizeSelector={showPageSizeSelector}
             // Hidden in VSCode (for now) because we don't have a panel to show
-            // the column/row explorer.
-            showColumnExplorer={showColumnExplorer && !isInVscode}
-            showRowExplorer={showRowExplorer && !isInVscode}
+            // the table explorer.
+            showTableExplorer={
+              (showRowExplorer || canShowColumnExplorer) && !isInVscode
+            }
             togglePanel={togglePanel}
             isPanelOpen={isPanelOpen}
+            isAnyPanelOpen={isAnyPanelOpen}
             viewedRowIdx={viewedRowIdx}
             onViewedRowChange={(rowIdx) => setViewedRowIdx(rowIdx)}
           />

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { isEqual } from "lodash-es";
+import { dequal as isEqual } from "dequal";
 import { type JSX, useEffect, useId, useState } from "react";
 import { useLocale } from "react-aria";
 import { z } from "zod";

package/src/plugins/impl/SliderPlugin.tsx

@@ -152,9 +152,7 @@ const SliderComponent = ({
                 nextValue = Number(start);
               }
               setInternalValue(nextValue);
-              if (!debounce) {
-                setValue(nextValue);
-              }
+              setValue(nextValue);
             }}
             minValue={start}
             maxValue={stop}

package/src/plugins/impl/TextInputPlugin.tsx

@@ -1,13 +1,14 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { AtSignIcon, GlobeIcon, LockIcon } from "lucide-react";
-import { type JSX, useState } from "react";
+import { type JSX, useRef, useState } from "react";
 import { z } from "zod";
 import {
   DebouncedInput,
   Input,
   OnBlurredInput,
 } from "../../components/ui/input";
+import { RANDOM_ID_ATTR } from "../../core/dom/ui-element-constants";
 import { cn } from "../../utils/cn";
 import type { IPlugin, IPluginProps, Setter } from "../types";
 import { Labeled } from "./common/labeled";
@@ -25,8 +26,12 @@ interface Data {
   disabled?: boolean;
   debounce?: boolean | number;
   fullWidth: boolean;
+  passwordHasValue?: boolean;
 }
 
+// Matches the masked dots.
+const MASK_PLACEHOLDER = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
+
 export class TextInputPlugin implements IPlugin<T, Data> {
   tagName = "marimo-text";
 
@@ -40,11 +45,20 @@ export class TextInputPlugin implements IPlugin<T, Data> {
     fullWidth: z.boolean().default(false),
     disabled: z.boolean().optional(),
     debounce: z.optional(z.union([z.boolean(), z.number()])),
+    passwordHasValue: z.boolean().optional(),
   });
 
   render(props: IPluginProps<T, Data>): JSX.Element {
+    // Force remount on cell re-run so masked state resets cleanly
+    const remountKey =
+      props.data.kind === "password"
+        ? props.host
+            .closest(`[${RANDOM_ID_ATTR}]`)
+            ?.getAttribute(RANDOM_ID_ATTR)
+        : undefined;
     return (
       <TextComponent
+        key={remountKey ?? undefined}
         {...props.data}
         value={props.value}
         setValue={props.setValue}
@@ -59,9 +73,33 @@ interface TextComponentProps extends Data {
 }
 
 const TextComponent = (props: TextComponentProps) => {
-  const [valueOnBlur, setValueOnBlur] = useState(props.value);
+  // Before first real keystroke: show masked placeholder, suppress setValue.
+  // After first keystroke: normal password field.
+  const initiallyMasked =
+    props.kind === "password" && props.passwordHasValue === true;
+  const [masked, setMasked] = useState(initiallyMasked);
+  const hasTyped = useRef(false);
+
+  const value = masked ? "" : props.value;
+  const placeholder = masked ? MASK_PLACEHOLDER : props.placeholder;
+  const setValue: Setter<T> = masked
+    ? (v) => {
+        if (!hasTyped.current) {
+          return;
+        }
+        setMasked(false);
+        props.setValue(v);
+      }
+    : props.setValue;
+  // Capture-phase handler sets the ref synchronously before child onChange
+  const onInputCapture = masked
+    ? () => {
+        hasTyped.current = true;
+      }
+    : undefined;
 
-  const valueToValidate = valueOnBlur == null ? props.value : valueOnBlur;
+  const [valueOnBlur, setValueOnBlur] = useState(props.value);
+  const valueToValidate = valueOnBlur == null ? value : valueOnBlur;
   const isValid = validate(props.kind, valueToValidate);
 
   const icon: Record<InputType, JSX.Element | null> = {
@@ -73,80 +111,79 @@ const TextComponent = (props: TextComponentProps) => {
 
   const endAdornment = props.maxLength ? (
     <span className="text-muted-foreground text-xs font-medium">
-      {props.value.length}/{props.maxLength}
+      {value.length}/{props.maxLength}
     </span>
   ) : null;
 
+  const inputClassName = cn({
+    "border-destructive": !isValid,
+    "w-full": props.fullWidth,
+  });
+
+  let input: JSX.Element;
+
   if (props.debounce === true) {
-    return (
-      <Labeled label={props.label} fullWidth={props.fullWidth}>
-        <OnBlurredInput
-          data-testid="marimo-plugin-text-input"
-          type={props.kind}
-          icon={icon[props.kind]}
-          placeholder={props.placeholder}
-          maxLength={props.maxLength}
-          minLength={props.minLength}
-          required={props.minLength != null && props.minLength > 0}
-          disabled={props.disabled}
-          className={cn({
-            "border-destructive": !isValid,
-            "w-full": props.fullWidth,
-          })}
-          endAdornment={endAdornment}
-          value={props.value}
-          onValueChange={props.setValue}
-        />
-      </Labeled>
+    input = (
+      <OnBlurredInput
+        data-testid="marimo-plugin-text-input"
+        type={props.kind}
+        icon={icon[props.kind]}
+        placeholder={placeholder}
+        maxLength={props.maxLength}
+        minLength={props.minLength}
+        required={props.minLength != null && props.minLength > 0}
+        disabled={props.disabled}
+        className={inputClassName}
+        endAdornment={endAdornment}
+        value={value}
+        onValueChange={setValue}
+        onInputCapture={onInputCapture}
+      />
     );
-  }
-
-  if (typeof props.debounce === "number") {
-    return (
-      <Labeled label={props.label} fullWidth={props.fullWidth}>
-        <DebouncedInput
-          data-testid="marimo-plugin-text-input"
-          type={props.kind}
-          icon={icon[props.kind]}
-          placeholder={props.placeholder}
-          maxLength={props.maxLength}
-          minLength={props.minLength}
-          required={props.minLength != null && props.minLength > 0}
-          disabled={props.disabled}
-          className={cn({
-            "border-destructive": !isValid,
-            "w-full": props.fullWidth,
-          })}
-          endAdornment={endAdornment}
-          value={props.value}
-          onValueChange={props.setValue}
-          onBlur={(event) => setValueOnBlur(event.currentTarget.value)}
-          delay={props.debounce}
-        />
-      </Labeled>
+  } else if (typeof props.debounce === "number") {
+    input = (
+      <DebouncedInput
+        data-testid="marimo-plugin-text-input"
+        type={props.kind}
+        icon={icon[props.kind]}
+        placeholder={placeholder}
+        maxLength={props.maxLength}
+        minLength={props.minLength}
+        required={props.minLength != null && props.minLength > 0}
+        disabled={props.disabled}
+        className={inputClassName}
+        endAdornment={endAdornment}
+        value={value}
+        onValueChange={setValue}
+        onBlur={(event) => setValueOnBlur(event.currentTarget.value)}
+        delay={props.debounce}
+        onInputCapture={onInputCapture}
+      />
     );
-  }
-
-  return (
-    <Labeled label={props.label} fullWidth={props.fullWidth}>
+  } else {
+    input = (
       <Input
         data-testid="marimo-plugin-text-input"
         type={props.kind}
         icon={icon[props.kind]}
-        placeholder={props.placeholder}
+        placeholder={placeholder}
         maxLength={props.maxLength}
         minLength={props.minLength}
         required={props.minLength != null && props.minLength > 0}
         disabled={props.disabled}
-        className={cn({
-          "border-destructive": !isValid,
-          "w-full": props.fullWidth,
-        })}
+        className={inputClassName}
         endAdornment={endAdornment}
-        value={props.value}
-        onInput={(event) => props.setValue(event.currentTarget.value)}
+        value={value}
+        onInput={(event) => setValue(event.currentTarget.value)}
         onBlur={(event) => setValueOnBlur(event.currentTarget.value)}
+        onInputCapture={onInputCapture}
       />
+    );
+  }
+
+  return (
+    <Labeled label={props.label} fullWidth={props.fullWidth}>
+      {input}
     </Labeled>
   );
 };

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

@@ -0,0 +1,120 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { z } from "zod";
+import { SetupMocks } from "@/__mocks__/common";
+import { initialModeAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+import type { IPluginProps } from "../../types";
+import { SliderPlugin } from "../SliderPlugin";
+
+SetupMocks.resizeObserver();
+
+describe("SliderPlugin", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    store.set(initialModeAtom, "edit");
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  const createProps = (
+    debounce: boolean,
+    includeInput: boolean,
+    setValue: ReturnType<typeof vi.fn>,
+  ): IPluginProps<number, z.infer<typeof SliderPlugin.prototype.validator>> => {
+    return {
+      host: document.createElement("div"),
+      value: 5,
+      setValue,
+      data: {
+        initialValue: 5,
+        start: 0,
+        stop: 10,
+        step: 1,
+        label: "Test Slider",
+        debounce,
+        orientation: "horizontal" as const,
+        showValue: false,
+        fullWidth: false,
+        includeInput,
+        steps: null,
+      },
+      functions: {},
+    };
+  };
+
+  it("slider triggers setValue immediately when debounce is false", () => {
+    const plugin = new SliderPlugin();
+    const setValue = vi.fn();
+    const props = createProps(false, false, setValue);
+    const { container } = render(plugin.render(props));
+
+    act(() => {
+      vi.advanceTimersByTime(0);
+    });
+
+    const thumb = container.querySelector('[role="slider"]');
+    expect(thumb).toBeTruthy();
+
+    // Radix UI Slider updates on keyboard ArrowRight/ArrowLeft
+    act(() => {
+      (thumb as HTMLElement)?.focus();
+      fireEvent.keyDown(thumb!, { key: "ArrowRight" });
+    });
+
+    expect(setValue).toHaveBeenCalledWith(6);
+  });
+
+  it("slider does not trigger setValue immediately when debounce is true", () => {
+    const plugin = new SliderPlugin();
+    const setValue = vi.fn();
+    const props = createProps(true, false, setValue);
+    const { container } = render(plugin.render(props));
+
+    act(() => {
+      vi.advanceTimersByTime(0);
+    });
+
+    const thumb = container.querySelector('[role="slider"]');
+
+    act(() => {
+      (thumb as HTMLElement)?.focus();
+      // Simulate just a programmatic change that Radix would trigger via pointer move
+      // which fires onValueChange but not onValueCommit yet
+      // Because we can't easily separated Radix's internal pointer events in jsdom, we
+      // test the main issue: editable input. We can trust Radix's onValueChange vs onValueCommit.
+    });
+
+    // We verified above that NumberField works when debounce=true
+    expect(setValue).not.toHaveBeenCalled();
+  });
+
+  it("editable input triggers setValue immediately even when slider debounce is true", () => {
+    const plugin = new SliderPlugin();
+    const setValue = vi.fn();
+    const props = createProps(true, true, setValue);
+    const { getByRole } = render(plugin.render(props));
+
+    act(() => {
+      vi.advanceTimersByTime(0);
+    });
+
+    // The react-aria NumberField renders an input textbox.
+    const numericInput = getByRole("textbox");
+
+    act(() => {
+      // Simulate typing a new value and pressing enter
+      // With React-Aria NumberField, onChange fires on blur or enter
+      fireEvent.change(numericInput, { target: { value: "9" } });
+      fireEvent.blur(numericInput);
+    });
+
+    // Because the user explicitly typed 9 in the editable input,
+    // setValue should be called immediately regardless of debounce=true.
+    expect(setValue).toHaveBeenCalledWith(9);
+  });
+});

package/src/plugins/impl/anywidget/model.ts

@@ -323,8 +323,7 @@ export async function handleWidgetMessage(
   const msg = notification.message;
 
   // Decode base64 buffers to DataViews (present in open/update/custom messages)
-  const base64Buffers: Base64String[] =
-    "buffers" in msg ? (msg.buffers as Base64String[]) : [];
+  const base64Buffers: Base64String[] = "buffers" in msg ? msg.buffers : [];
   const buffers = base64Buffers.map(base64ToDataView);
 
   switch (msg.method) {