@marimo-team/frontend 0.16.2 → 0.16.3

package/src/plugins/impl/plotly/PlotlyPlugin.tsx

@@ -27,7 +27,7 @@ type AxisDatum = unknown;
 
 type T =
   | {
-      points?: Array<Record<AxisName, AxisDatum>> | Plotly.PlotDatum[];
+      points?: Record<AxisName, AxisDatum>[] | Plotly.PlotDatum[];
       indices?: number[];
       range?: {
         x?: number[];
@@ -85,7 +85,7 @@ function initialLayout(figure: Figure): Partial<Plotly.Layout> {
   };
 }
 
-const SUNBURST_DATA_KEYS: Array<keyof Plotly.SunburstPlotDatum> = [
+const SUNBURST_DATA_KEYS: (keyof Plotly.SunburstPlotDatum)[] = [
   "color",
   "curveNumber",
   "entry",
@@ -279,7 +279,7 @@ PlotlyComponent.displayName = "PlotlyComponent";
  */
 function extractPoints(
   points: Plotly.PlotDatum[],
-): Array<Record<AxisName, AxisDatum>> {
+): Record<AxisName, AxisDatum>[] {
   if (!points) {
     return [];
   }

package/src/plugins/impl/vega/__tests__/loader.test.ts

@@ -59,10 +59,10 @@ describe("DATE_MIDDLEWARE", () => {
     const csv = "Date,Value\n2024-13-45,100\n2024-02-30,200";
 
     // When parsing the CSV
-    const data = parseCsvData(csv, false) as Array<{
+    const data = parseCsvData(csv, false) as {
       Date: string;
       Value: number;
-    }>;
+    }[];
 
     // Then invalid dates should remain as strings
     expect(typeof data[0].Date).toBe("string");

package/src/plugins/impl/vega/loader.ts

@@ -41,7 +41,7 @@ const BIG_INT_MIDDLEWARE: Middleware = () => {
       return result;
     }
 
-    const parsedInt = Number.parseInt(v);
+    const parsedInt = Number.parseInt(v, 10);
     if (isNumber(parsedInt)) {
       const needsBigInt = Math.abs(parsedInt) > Number.MAX_SAFE_INTEGER;
       if (!needsBigInt) {

package/src/plugins/impl/vega/vega-component.tsx

@@ -157,7 +157,7 @@ const LoadedVegaComponent = ({
   });
 
   const renderHelpContent = () => {
-    const hints: Array<[string, string]> = [];
+    const hints: [string, string][] = [];
     if (ParamNames.hasPoint(names)) {
       hints.push([
         "Point selection",

package/src/plugins/impl/vega/vega-loader.ts

@@ -7,7 +7,7 @@ import type { DataType } from "./vega-loader";
 // Re-export the vega-loader functions to add TypeScript types
 
 export function read<T = object>(
-  data: string | Record<string, unknown> | Array<Record<string, unknown>>,
+  data: string | Record<string, unknown> | Record<string, unknown>[],
   format:
     | DataFormat
     | {
@@ -27,7 +27,7 @@ export interface Loader {
   load(
     uri: string,
     options?: unknown,
-  ): Promise<string | Record<string, unknown> | Array<Record<string, unknown>>>;
+  ): Promise<string | Record<string, unknown> | Record<string, unknown>[]>;
   sanitize(uri: string, options?: unknown): Promise<{ href: string }>;
   http(uri: string, options?: unknown): Promise<string>;
   file(filename: string): Promise<string>;

package/src/plugins/layout/NavigationMenuPlugin.tsx

@@ -35,7 +35,7 @@ interface Data {
   /**
    * The labels for each item; raw HTML.
    */
-  items: Array<MenuItem | MenuItemGroup>;
+  items: (MenuItem | MenuItemGroup)[];
 
   /**
    * The orientation of the menu.

package/src/plugins/layout/RoutesPlugin.tsx

@@ -69,13 +69,12 @@ const RoutesComponent = ({
   }, [handleFindMatch]);
 
   if (!matched) {
-    // eslint-disable-next-line react/jsx-no-useless-fragment
+    // biome-ignore lint/complexity/noUselessFragments: this is intentional
     return <></>;
   }
 
   const matchedIndex = routes.indexOf(matched);
   const child = React.Children.toArray(children)[matchedIndex];
 
-  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{child}</>;
 };

package/src/plugins/plugins.ts

@@ -54,7 +54,7 @@ import type { IStatelessPlugin } from "./stateless-plugin";
 import type { IPlugin } from "./types";
 
 // List of UI plugins
-export const UI_PLUGINS: Array<IPlugin<any, unknown>> = [
+export const UI_PLUGINS: IPlugin<any, unknown>[] = [
   new ButtonPlugin(),
   new CheckboxPlugin(),
   DataTablePlugin,
@@ -91,7 +91,7 @@ export const UI_PLUGINS: Array<IPlugin<any, unknown>> = [
 ];
 
 // List of output / layout plugins
-const LAYOUT_PLUGINS: Array<IStatelessPlugin<unknown>> = [
+const LAYOUT_PLUGINS: IStatelessPlugin<unknown>[] = [
   new AccordionPlugin(),
   new CalloutPlugin(),
   new CarouselPlugin(),

package/src/utils/Logger.ts

@@ -1,5 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-/* eslint-disable no-console */
+/** biome-ignore-all lint/suspicious/noConsole: For console logging */
 
 import { Functions } from "./functions";
 

package/src/utils/__tests__/data-views.test.ts

@@ -1,39 +1,11 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
-import { byteStringToDataView, updateBufferPaths } from "../data-views";
-import type { Base64String, ByteString } from "../json/base64";
+import { updateBufferPaths } from "../data-views";
 
 describe("updateBufferPaths", () => {
-  it("should return the original object if bufferPaths is null", () => {
+  it("should return the original object if bufferPaths.length === 0", () => {
     const input = { a: 1, b: 2 };
-    const result = updateBufferPaths(input, null);
-    expect(result).toEqual(input);
-  });
-
-  it("should update buffer paths correctly", () => {
-    const input = {
-      a: 1,
-      b: {
-        c: "Hello",
-        d: "World",
-      },
-    };
-    const bufferPaths = [
-      ["b", "c"],
-      ["b", "d"],
-    ];
-    const result = updateBufferPaths(input, bufferPaths);
-
-    expect(result.a).toBe(1);
-    expect(result.b.c).toBeInstanceOf(DataView);
-    expect(result.b.d).toBeInstanceOf(DataView);
-  });
-
-  it("should handle non-existent paths", () => {
-    const input = { a: 1 };
-    const bufferPaths = [["b", "c"]];
-    const result = updateBufferPaths(input, bufferPaths);
-
+    const result = updateBufferPaths(input, [], []);
     expect(result).toEqual(input);
   });
 
@@ -49,19 +21,32 @@ describe("updateBufferPaths", () => {
       ["b", "c"],
       ["b", "d"],
     ];
-    const buffers: Base64String[] = [
-      "SGVsbG8=" as Base64String,
-      "V29ybGQ=" as Base64String,
-    ]; // Base64 encoded "Hello" and "World"
+    const buffers = [
+      new TextEncoder().encode("Hello"),
+      new TextEncoder().encode("World"),
+    ].map((b) => new DataView(b.buffer));
     const result = updateBufferPaths(input, bufferPaths, buffers);
-
-    expect(result.a).toBe(1);
-    const cView = result.b.c as unknown as DataView;
-    const dView = result.b.d as unknown as DataView;
-    expect(cView).toBeInstanceOf(DataView);
-    expect(dView).toBeInstanceOf(DataView);
-    expect(cView.byteLength).toBe(5);
-    expect(dView.byteLength).toBe(5);
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "a": 1,
+        "b": {
+          "c": DataView [
+            72,
+            101,
+            108,
+            108,
+            111,
+          ],
+          "d": DataView [
+            87,
+            111,
+            114,
+            108,
+            100,
+          ],
+        },
+      }
+    `);
   });
 
   it("should throw error when buffers and paths length mismatch", () => {
@@ -70,7 +55,7 @@ describe("updateBufferPaths", () => {
       ["b", "c"],
       ["b", "d"],
     ];
-    const buffers: Base64String[] = ["SGVsbG8=" as Base64String]; // Only one buffer for two paths
+    const buffers = [new DataView(new ArrayBuffer())]; // Only one buffer for two paths
 
     expect(() => updateBufferPaths(input, bufferPaths, buffers)).toThrow(
       "Buffers and buffer paths not the same length",
@@ -80,33 +65,10 @@ describe("updateBufferPaths", () => {
   it("should handle empty buffers array", () => {
     const input = { a: 1 };
     const bufferPaths = [["b", "c"]];
-    const buffers: Base64String[] = [];
+    const buffers: DataView[] = [];
 
     expect(() => updateBufferPaths(input, bufferPaths, buffers)).toThrow(
       "Buffers and buffer paths not the same length",
     );
   });
 });
-
-describe("byteStringToDataView", () => {
-  it("should convert a base64 string to a DataView", () => {
-    const input = "Hello" as ByteString;
-    const result = byteStringToDataView(input);
-
-    expect(result).toBeInstanceOf(DataView);
-    expect(result.byteLength).toBe(5);
-    expect(result.getUint8(0)).toBe(72); // 'H'
-    expect(result.getUint8(1)).toBe(101); // 'e'
-    expect(result.getUint8(2)).toBe(108); // 'l'
-    expect(result.getUint8(3)).toBe(108); // 'l'
-    expect(result.getUint8(4)).toBe(111); // 'o'
-  });
-
-  it("should handle empty string", () => {
-    const input = "" as ByteString;
-    const result = byteStringToDataView(input);
-
-    expect(result).toBeInstanceOf(DataView);
-    expect(result.byteLength).toBe(0);
-  });
-});

package/src/utils/__tests__/dom.test.ts

@@ -60,14 +60,14 @@ describe("parseHtmlContent", () => {
 
 describe("ansiToPlainText", () => {
   test("converts ANSI color codes to plain text", () => {
-    const ansiString = "\x1b[31mError:\x1b[0m Something went wrong";
+    const ansiString = "\u001B[31mError:\u001B[0m Something went wrong";
     const result = ansiToPlainText(ansiString);
     expect(result).toMatchInlineSnapshot(`"Error: Something went wrong"`);
   });
 
   test("handles multiple ANSI color codes", () => {
     const ansiString =
-      "\x1b[32mSUCCESS:\x1b[0m \x1b[34mOperation completed\x1b[0m successfully";
+      "\u001B[32mSUCCESS:\u001B[0m \u001B[34mOperation completed\u001B[0m successfully";
     const result = ansiToPlainText(ansiString);
     expect(result).toMatchInlineSnapshot(
       `"SUCCESS: Operation completed successfully"`,
@@ -76,14 +76,14 @@ describe("ansiToPlainText", () => {
 
   test("handles ANSI bold and color combinations", () => {
     const ansiString =
-      "\x1b[1;31mBOLD RED ERROR:\x1b[0m \x1b[33mWarning message\x1b[0m";
+      "\u001B[1;31mBOLD RED ERROR:\u001B[0m \u001B[33mWarning message\u001B[0m";
     const result = ansiToPlainText(ansiString);
     expect(result).toMatchInlineSnapshot(`"BOLD RED ERROR: Warning message"`);
   });
 
   test("handles Python traceback with ANSI codes", () => {
     const ansiString =
-      "\x1b[0;36m  File \"\x1b[0m\x1b[0;32mtest.py\x1b[0m\x1b[0;36m\", line \x1b[0m\x1b[0;32m1\x1b[0m\x1b[0;36m, in \x1b[0m\x1b[0;35m<module>\x1b[0m\n\x1b[0;31mNameError\x1b[0m: name 'undefined_var' is not defined";
+      "\u001B[0;36m  File \"\u001B[0m\u001B[0;32mtest.py\u001B[0m\u001B[0;36m\", line \u001B[0m\u001B[0;32m1\u001B[0m\u001B[0;36m, in \u001B[0m\u001B[0;35m<module>\u001B[0m\n\u001B[0;31mNameError\u001B[0m: name 'undefined_var' is not defined";
     const result = ansiToPlainText(ansiString);
     expect(result).toMatchInlineSnapshot(`
       "  File "test.py", line 1, in <module>
@@ -93,7 +93,7 @@ describe("ansiToPlainText", () => {
 
   test("handles error messages with background colors", () => {
     const ansiString =
-      "\x1b[41;37m CRITICAL ERROR \x1b[0m \x1b[31mSystem failure detected\x1b[0m";
+      "\u001B[41;37m CRITICAL ERROR \u001B[0m \u001B[31mSystem failure detected\u001B[0m";
     const result = ansiToPlainText(ansiString);
     expect(result).toMatchInlineSnapshot(
       `" CRITICAL ERROR  System failure detected"`,
@@ -102,7 +102,7 @@ describe("ansiToPlainText", () => {
 
   test("handles complex stack trace with mixed formatting", () => {
     const ansiString =
-      'Traceback (most recent call last):\n  \x1b[36mFile "\x1b[32m/path/to/file.py\x1b[36m", line \x1b[32m42\x1b[36m, in \x1b[35mfunction_name\x1b[0m\n    \x1b[31mraise ValueError("Something went wrong")\x1b[0m\n\x1b[31mValueError\x1b[0m: Something went wrong';
+      'Traceback (most recent call last):\n  \u001B[36mFile "\u001B[32m/path/to/file.py\u001B[36m", line \u001B[32m42\u001B[36m, in \u001B[35mfunction_name\u001B[0m\n    \u001B[31mraise ValueError("Something went wrong")\u001B[0m\n\u001B[31mValueError\u001B[0m: Something went wrong';
     const result = ansiToPlainText(ansiString);
     expect(result).toMatchInlineSnapshot(`
       "Traceback (most recent call last):
@@ -128,7 +128,7 @@ describe("ansiToPlainText", () => {
 
   test("handles whitespace and newlines correctly", () => {
     const ansiString =
-      "\x1b[31m  Error:  \x1b[0m\n\n  \x1b[33m  Warning  \x1b[0m  ";
+      "\u001B[31m  Error:  \u001B[0m\n\n  \u001B[33m  Warning  \u001B[0m  ";
     const result = ansiToPlainText(ansiString);
     expect(result).toMatchInlineSnapshot(`
       "  Error:
@@ -139,7 +139,7 @@ describe("ansiToPlainText", () => {
 
   test("handles JavaScript error stack trace", () => {
     const ansiString =
-      "\x1b[31mReferenceError\x1b[0m: \x1b[33mvariable\x1b[0m is not defined\n    at \x1b[36mObject.<anonymous>\x1b[0m (\x1b[32m/path/to/script.js\x1b[0m:\x1b[33m5\x1b[0m:\x1b[33m1\x1b[0m)";
+      "\u001B[31mReferenceError\u001B[0m: \u001B[33mvariable\u001B[0m is not defined\n    at \u001B[36mObject.<anonymous>\u001B[0m (\u001B[32m/path/to/script.js\u001B[0m:\u001B[33m5\u001B[0m:\u001B[33m1\u001B[0m)";
     const result = ansiToPlainText(ansiString);
     expect(result).toMatchInlineSnapshot(`
       "ReferenceError: variable is not defined
@@ -149,7 +149,7 @@ describe("ansiToPlainText", () => {
 
   test("handles Rust panic with ANSI formatting", () => {
     const ansiString =
-      "thread '\x1b[32mmain\x1b[0m' panicked at '\x1b[31massertion failed: `(left == right)`\x1b[0m'\n  \x1b[36mleft\x1b[0m: `\x1b[33m5\x1b[0m`\n \x1b[36mright\x1b[0m: `\x1b[33m10\x1b[0m`";
+      "thread '\u001B[32mmain\u001B[0m' panicked at '\u001B[31massertion failed: `(left == right)`\u001B[0m'\n  \u001B[36mleft\u001B[0m: `\u001B[33m5\u001B[0m`\n \u001B[36mright\u001B[0m: `\u001B[33m10\u001B[0m`";
     const result = ansiToPlainText(ansiString);
     expect(result).toMatchInlineSnapshot(`
       "thread 'main' panicked at 'assertion failed: \`(left == right)\`'
@@ -160,7 +160,7 @@ describe("ansiToPlainText", () => {
 
   test("handles mix of 8-bit and 256-color ANSI codes", () => {
     const ansiString =
-      "\x1b[38;5;196mBright Red\x1b[0m and \x1b[38;5;46mBright Green\x1b[0m text";
+      "\u001B[38;5;196mBright Red\u001B[0m and \u001B[38;5;46mBright Green\u001B[0m text";
     const result = ansiToPlainText(ansiString);
     expect(result).toMatchInlineSnapshot(`"Bright Red and Bright Green text"`);
   });

package/src/utils/__tests__/id-tree.test.ts

@@ -740,7 +740,7 @@ describe("MultiColumn", () => {
   });
 
   it("creates from ids and columns", () => {
-    const idAndColumns: Array<[string, number | undefined | null]> = [
+    const idAndColumns: [string, number | undefined | null][] = [
       ["A1", 0],
       ["A2", 0],
       ["B1", 1],
@@ -1991,4 +1991,52 @@ describe("CollapsibleTree.fromWithPreviousShape", () => {
     expect(tree.isCollapsed("one")).toBe(false);
     expect(tree.topLevelIds).toEqual(["one", "three", "four"]);
   });
+
+  it("reproduces GitHub issue #6188: inOrderIds with nested collapses", () => {
+    // Simplified reproduction case:
+    // Cell A (markdown): # Section 1 Header
+    // Cell B (markdown): ## Subsection 1.1 Header
+    // Cell C (python): print("This cell should be in Subsection 1.1")
+    // Cell D (python): print("This cell should also be in Subsection 1.1")
+    // Cell E (markdown): ## Subsection 1.2 Header
+    // Cell F (python): print("This cell should be in Subsection 1.2")
+
+    const originalOrder = [
+      "CellA", // # Section 1 Header
+      "CellB", // ## Subsection 1.1 Header
+      "CellC", // print("This cell should be in Subsection 1.1")
+      "CellD", // print("This cell should also be in Subsection 1.1")
+      "CellE", // ## Subsection 1.2 Header
+      "CellF", // print("This cell should be in Subsection 1.2")
+    ];
+
+    // Create notebook with one column
+    let notebook = MultiColumn.from([originalOrder]);
+
+    // Before collapsing, order should be correct
+    expect(notebook.inOrderIds).toEqual(originalOrder);
+
+    const columnId = notebook.getColumnIds()[0];
+
+    // Follow the exact reproduction steps from the GitHub issue:
+    // 1. Collapse B (subsection 1.1) - includes C, D (stops before E)
+    notebook = notebook.transform(columnId, (tree) =>
+      tree.collapse("CellB", "CellD"),
+    );
+
+    // 2. Collapse E (subsection 1.2) - includes F (to end)
+    notebook = notebook.transform(columnId, (tree) =>
+      tree.collapse("CellE", undefined),
+    );
+
+    // 3. Collapse A (section 1) - includes all the rest (B, E and their children)
+    notebook = notebook.transform(columnId, (tree) =>
+      tree.collapse("CellA", undefined),
+    );
+
+    const finalOrder = notebook.inOrderIds;
+
+    // inOrderIds now correctly preserves logical order even with nested collapses
+    expect(finalOrder).toEqual(originalOrder);
+  });
 });

package/src/utils/__tests__/storage.test.ts

@@ -29,7 +29,7 @@ interface TestValue {
 
 interface SerializableValue {
   id: string;
-  data: Array<[string, number]>;
+  data: [string, number][];
 }
 
 describe("adaptForLocalStorage", () => {

package/src/utils/__tests__/traceback.test.ts

@@ -6,14 +6,20 @@ import { extractAllTracebackInfo } from "../traceback";
 describe("traceback", () => {
   test("extracts cell-link", () => {
     const errors = extractAllTracebackInfo(Tracebacks.raw);
-    expect(errors).toMatchInlineSnapshot(`
+    expect(
+      errors[0].kind === "file" &&
+        errors[0].filePath.endsWith("marimo/_runtime/executor.py"),
+    ).toBe(true);
+    expect(errors.slice(1)).toMatchInlineSnapshot(`
       [
         {
           "cellId": "Hbol",
+          "kind": "cell",
           "lineNumber": 4,
         },
         {
           "cellId": "Hbol",
+          "kind": "cell",
           "lineNumber": 2,
         },
       ]
@@ -22,10 +28,15 @@ describe("traceback", () => {
 
   test("extracts cell-link from assertion", () => {
     const info = extractAllTracebackInfo(Tracebacks.assertion);
-    expect(info).toMatchInlineSnapshot(`
+    expect(
+      info[0].kind === "file" &&
+        info[0].filePath.endsWith("marimo/_runtime/executor.py"),
+    ).toBe(true);
+    expect(info.slice(1)).toMatchInlineSnapshot(`
       [
         {
           "cellId": "Hbol",
+          "kind": "cell",
           "lineNumber": 1,
         },
       ]

package/src/utils/arrays.ts

@@ -55,7 +55,7 @@ export function arrayShallowEquals<T>(a: T[], b: T[]): boolean {
 export const Arrays = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   EMPTY: [] as any,
-  zip: <T, U>(a: T[], b: U[]): Array<[T, U]> => {
+  zip: <T, U>(a: T[], b: U[]): [T, U][] => {
     invariant(a.length === b.length, "Arrays must be the same length");
     return a.map((item, i) => [item, b[i]]);
   },

package/src/utils/createReducer.ts

@@ -79,11 +79,7 @@ type Middleware<State> = (
 export function createReducerAndAtoms<
   State,
   RH extends ReducerHandlers<NoInfer<State>>,
->(
-  initialState: () => State,
-  reducers: RH,
-  middleware?: Array<Middleware<State>>,
-) {
+>(initialState: () => State, reducers: RH, middleware?: Middleware<State>[]) {
   const { reducer, createActions } = createReducer(initialState, reducers);
 
   const reducerWithMiddleware = (state: State, action: ReducerAction<any>) => {

package/src/utils/data-views.ts

@@ -1,7 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import { get, set } from "lodash-es";
+import { set } from "lodash-es";
 import { invariant } from "./invariant";
-import { type Base64String, type ByteString, typedAtob } from "./json/base64";
 import { Logger } from "./Logger";
 
 /**
@@ -9,8 +8,8 @@ import { Logger } from "./Logger";
  */
 export function updateBufferPaths<T extends Record<string, unknown>>(
   inputObject: T,
-  bufferPaths: Array<Array<string | number>> | null | undefined,
-  buffers?: Base64String[] | null | undefined,
+  bufferPaths: readonly (readonly (string | number)[])[],
+  buffers: readonly DataView[],
 ): T {
   // If no buffer paths, return the original object
   if (!bufferPaths || bufferPaths.length === 0) {
@@ -30,25 +29,13 @@ export function updateBufferPaths<T extends Record<string, unknown>>(
   for (const [i, bufferPath] of bufferPaths.entries()) {
     // If buffers exists, we use that value
     // Otherwise we grab it from inside the inputObject
-    const bytes: ByteString = buffers
-      ? typedAtob(buffers[i])
-      : get(object, bufferPath);
-    if (!bytes) {
+    const dataView = buffers[i];
+    if (!dataView) {
       Logger.warn("Could not find buffer at path", bufferPath);
       continue;
     }
-    const buffer = byteStringToDataView(bytes);
-    object = set(object, bufferPath, buffer);
+    object = set(object, bufferPath, dataView);
   }
 
   return object;
 }
-
-export const byteStringToDataView = (bytes: ByteString) => {
-  const buffer = new ArrayBuffer(bytes.length);
-  const view = new DataView(buffer);
-  for (let i = 0; i < bytes.length; i++) {
-    view.setUint8(i, bytes.charCodeAt(i));
-  }
-  return view;
-};

package/src/utils/edit-distance.ts

@@ -134,7 +134,7 @@ export function mergeArray<T, U>(
   arr2: U[],
   equals: (a: T, b: U) => boolean,
   stub: T,
-): { merged: Array<T | null>; edits: EditDistanceResult } {
+): { merged: (T | null)[]; edits: EditDistanceResult } {
   const edits = editDistanceGeneral(arr1, arr2, equals);
   return {
     merged: applyOperationsWithStub(arr1, edits.operations, stub),

package/src/utils/fileToBase64.ts

@@ -34,7 +34,7 @@ export function blobToString(
  *
  * Returns a promised array of tuples [file name, file contents].
  */
-export function filesToBase64(files: File[]): Promise<Array<[string, string]>> {
+export function filesToBase64(files: File[]): Promise<[string, string][]> {
   return Promise.all(
     files.map((file) =>
       blobToString(file, "base64").then(