npm - @marimo-team/frontend - Versions diffs - 0.22.1-dev25 → 0.22.1-dev27 - Mend

@marimo-team/frontend 0.22.1-dev25 → 0.22.1-dev27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (67) hide show

package/dist/index.html CHANGED Viewed

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-DPuSyce0.js"></script>
+    <script type="module" crossorigin src="./assets/index-Dfcne_w3.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-DXnewu3N.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-Bj1aDYRI.js">
@@ -242,7 +242,7 @@
     <link rel="stylesheet" crossorigin href="./assets/cells-jmgGt1lS.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DdDKmWlR.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B7vuddcd.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-CCazW2UV.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-DawClVBD.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.22.1-dev25",
+  "version": "0.22.1-dev27",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -171,10 +171,9 @@
     "build": "cross-env vite build",
     "test": "vitest",
     "typecheck": "tsgo",
-    "format": "oxfmt --config ../.oxfmtrc.json src",
-    "format:check": "oxfmt --config ../.oxfmtrc.json --check src",
+    "format": "oxfmt --config ../.oxfmtrc.json",
     "lint": "run-s lint:oxlint lint:stylelint",
-    "lint:oxlint": "oxlint --fix src",
+    "lint:oxlint": "oxlint --fix",
     "lint:stylelint": "stylelint src/**/*.css --fix",
     "preview": "vite preview",
     "dev:quarto": "VITE_MARIMO_ISLANDS=true vite",
@@ -216,7 +215,7 @@
     "msw": "^2.12.7",
     "npm-run-all2": "^6.2.6",
     "oxfmt": "^0.42.0",
-    "oxlint": "^1.57.0",
+    "oxlint": "^1.58.0",
     "postcss": "^8.5.6",
     "postcss-plugin-namespace": "^0.0.3",
     "react": "^19.2.4",

package/src/__tests__/main.test.tsx CHANGED Viewed

@@ -45,20 +45,18 @@ describe("main", () => {
     store.set(configOverridesAtom, {});
   });
-  it.each([
-    "edit",
-    "read",
-    "home",
-    "run",
-  ])("should mount with mode %s", (_mode) => {
-    const el = document.createElement("div");
-    mount({ mode: "edit" }, el);
-    expect(store.get(viewStateAtom).mode).toBe("edit");
-    expect(store.get(filenameAtom)).toBeDefined();
-    expect(store.get(marimoVersionAtom)).toBe("unknown");
-    expect(store.get(showCodeInRunModeAtom)).toBe(true);
-  });
+  it.each(["edit", "read", "home", "run"])(
+    "should mount with mode %s",
+    (_mode) => {
+      const el = document.createElement("div");
+      mount({ mode: "edit" }, el);
+      expect(store.get(viewStateAtom).mode).toBe("edit");
+      expect(store.get(filenameAtom)).toBeDefined();
+      expect(store.get(marimoVersionAtom)).toBe("unknown");
+      expect(store.get(showCodeInRunModeAtom)).toBe(true);
+    },
+  );
   it("should not mount with invalid mode", () => {
     const el = document.createElement("div");

package/src/components/ai/ai-provider-icon.tsx CHANGED Viewed

@@ -36,8 +36,7 @@ const icons: Record<ProviderId | ExternalAgentId, string> = {
   opencode: OpencodeIcon,
 };
-export interface AiProviderIconProps
-  extends React.HTMLAttributes<HTMLImageElement> {
+export interface AiProviderIconProps extends React.HTMLAttributes<HTMLImageElement> {
   provider: keyof typeof icons | "openai-compatible";
   className?: string;
 }

package/src/components/data-table/cell-selection/types.ts CHANGED Viewed

@@ -40,8 +40,9 @@ export interface CellSelectionInstance<TData extends RowData> {
 declare module "@tanstack/react-table" {
   interface TableState extends CellSelectionTableState {}
-  interface TableOptionsResolved<TData extends RowData>
-    extends CellSelectionOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends CellSelectionOptions {}
   interface Table<TData extends RowData> extends CellSelectionInstance<TData> {}

package/src/components/data-table/charts/charts.tsx CHANGED Viewed

@@ -257,7 +257,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
           saveTabChartType(tab.tabName, chartType);
         };
         return (
-          <TabsContent key={idx} value={tab.tabName} className="h-[400px] mt-1">
+          <TabsContent key={idx} value={tab.tabName} className="h-[400px] mt-0">
             <ChartPanel
               tableData={data}
               chartConfig={tab.config}
@@ -475,7 +475,7 @@ export const ChartPanel: React.FC<{
   );
   return (
-    <div className="flex flex-row gap-2 h-full rounded-md border pr-2">
+    <div className="flex flex-row gap-2 h-full rounded-md border-t pr-2">
       <div
         className={`relative flex flex-col gap-2 overflow-auto px-2 py-3 scrollbar-thin transition-width duration-200 ${formCollapsed ? "w-8" : "w-[300px]"}`}
       >

package/src/components/data-table/column-formatting/types.ts CHANGED Viewed

@@ -48,8 +48,9 @@ declare module "@tanstack/react-table" {
   //merge column formatting's state with the existing table state
   interface TableState extends ColumnFormattingTableState {}
   //merge column formatting's options with the existing table options
-  interface TableOptionsResolved<TData extends RowData>
-    extends ColumnFormattingOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends ColumnFormattingOptions {}
   //merge column formatting's instance APIs with the existing table instance APIs
   interface Column<TData extends RowData> extends ColumnFormattingInstance {}
 }

package/src/components/data-table/column-header.tsx CHANGED Viewed

@@ -63,8 +63,10 @@ import { stringifyUnknownValue } from "./utils";
 const TOP_K_ROWS = 30;
-interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface DataTableColumnHeaderProps<
+  TData,
+  TValue,
+> extends React.HTMLAttributes<HTMLDivElement> {
   column: Column<TData, TValue>;
   header: React.ReactNode;
   justify?: "left" | "center" | "right";

package/src/components/data-table/column-wrapping/types.ts CHANGED Viewed

@@ -22,8 +22,9 @@ export interface ColumnWrappingInstance {
 declare module "@tanstack/react-table" {
   interface TableState extends ColumnWrappingTableState {}
-  interface TableOptionsResolved<TData extends RowData>
-    extends ColumnWrappingOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends ColumnWrappingOptions {}
   interface Column<TData extends RowData> extends ColumnWrappingInstance {}
 }

package/src/components/data-table/copy-column/types.ts CHANGED Viewed

@@ -12,8 +12,9 @@ export interface CopyColumnInstance {
 // Use declaration merging to add our new feature APIs
 declare module "@tanstack/react-table" {
-  interface TableOptionsResolved<TData extends RowData>
-    extends CopyColumnOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends CopyColumnOptions {}
   interface Column<TData extends RowData> extends CopyColumnInstance {}
 }

package/src/components/data-table/focus-row/types.ts CHANGED Viewed

@@ -25,8 +25,9 @@ export interface FocusRowInstance {
 declare module "@tanstack/react-table" {
   interface TableState extends FocusRowTableState {}
-  interface TableOptionsResolved<TData extends RowData>
-    extends FocusRowOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends FocusRowOptions {}
   interface Row<TData extends RowData> extends FocusRowInstance {}
 }

package/src/components/data-table/range-focus/__tests__/atoms.test.ts CHANGED Viewed

@@ -56,18 +56,18 @@ function createMockCell(
 }
 function createMockTable(): Table<T> {
-  const mockToggleSelected = vi.fn().mockImplementation(function (this: {
-    isSelected: boolean;
-  }) {
-    this.isSelected = !this.isSelected;
-    return { isSelected: this.isSelected };
-  });
+  const mockToggleSelected = vi
+    .fn()
+    .mockImplementation(function (this: { isSelected: boolean }) {
+      this.isSelected = !this.isSelected;
+      return { isSelected: this.isSelected };
+    });
-  const mockGetIsSelected = vi.fn().mockImplementation(function (this: {
-    isSelected: boolean;
-  }) {
-    return this.isSelected;
-  });
+  const mockGetIsSelected = vi
+    .fn()
+    .mockImplementation(function (this: { isSelected: boolean }) {
+      return this.isSelected;
+    });
   const rows = [
     {

package/src/components/data-table/range-focus/__tests__/use-cell-range-selection.test.ts CHANGED Viewed

@@ -23,17 +23,15 @@ describe("isInteractiveTarget", () => {
     expect(isInteractiveTarget(createMouseEvent(span, cell))).toBe(false);
   });
-  it.each([
-    "input",
-    "button",
-    "select",
-    "textarea",
-  ])("returns true when clicking a <%s>", (tag) => {
-    const cell = document.createElement("td");
-    const el = document.createElement(tag);
-    cell.append(el);
-    expect(isInteractiveTarget(createMouseEvent(el, cell))).toBe(true);
-  });
+  it.each(["input", "button", "select", "textarea"])(
+    "returns true when clicking a <%s>",
+    (tag) => {
+      const cell = document.createElement("td");
+      const el = document.createElement(tag);
+      cell.append(el);
+      expect(isInteractiveTarget(createMouseEvent(el, cell))).toBe(true);
+    },
+  );
   it("returns true when clicking an <a> link", () => {
     const cell = document.createElement("td");

package/src/components/editor/__tests__/data-attributes.test.tsx CHANGED Viewed

@@ -33,108 +33,107 @@ beforeAll(() => {
 });
 describe("Cell data attributes", () => {
-  it.each([
-    "edit",
-    "read",
-    "present",
-  ])("should render cell with data-cell-id and data-cell-name in %s mode", (mode) => {
-    const { store, wrapper } = createTestWrapper();
-    const cid = cellId("test");
-    const cellName = "test_cell";
+  it.each(["edit", "read", "present"])(
+    "should render cell with data-cell-id and data-cell-name in %s mode",
+    (mode) => {
+      const { store, wrapper } = createTestWrapper();
+      const cid = cellId("test");
+      const cellName = "test_cell";
-    const userConfig: UserConfig = {
-      display: {
-        cell_output: "below",
-        code_editor_font_size: 14,
-        dataframes: "rich",
-        default_table_page_size: 10,
-        default_table_max_columns: 10,
-        default_width: "normal",
-        theme: "light",
-        reference_highlighting: false,
-      },
-      keymap: { preset: "default" },
-      completion: {
-        activate_on_typing: true,
-        signature_hint_on_typing: false,
-        copilot: false,
-      },
-      formatting: { line_length: 88 },
-      package_management: { manager: "pip" },
-      runtime: {
-        auto_instantiate: false,
-        default_sql_output: "native",
-        auto_reload: "off",
-        on_cell_change: "lazy",
-        watcher_on_save: "lazy",
-        reactive_tests: true,
-        output_max_bytes: 1_000_000,
-        std_stream_max_bytes: 1_000_000,
-        pythonpath: [],
-        dotenv: [".env"],
-      },
-      server: {
-        browser: "default",
-        follow_symlink: false,
-      },
-      save: { autosave: "off", autosave_delay: 1000, format_on_save: false },
-      ai: {},
-    } as UserConfig;
+      const userConfig: UserConfig = {
+        display: {
+          cell_output: "below",
+          code_editor_font_size: 14,
+          dataframes: "rich",
+          default_table_page_size: 10,
+          default_table_max_columns: 10,
+          default_width: "normal",
+          theme: "light",
+          reference_highlighting: false,
+        },
+        keymap: { preset: "default" },
+        completion: {
+          activate_on_typing: true,
+          signature_hint_on_typing: false,
+          copilot: false,
+        },
+        formatting: { line_length: 88 },
+        package_management: { manager: "pip" },
+        runtime: {
+          auto_instantiate: false,
+          default_sql_output: "native",
+          auto_reload: "off",
+          on_cell_change: "lazy",
+          watcher_on_save: "lazy",
+          reactive_tests: true,
+          output_max_bytes: 1_000_000,
+          std_stream_max_bytes: 1_000_000,
+          pythonpath: [],
+          dotenv: [".env"],
+        },
+        server: {
+          browser: "default",
+          follow_symlink: false,
+        },
+        save: { autosave: "off", autosave_delay: 1000, format_on_save: false },
+        ai: {},
+      } as UserConfig;
-    const notebook = MockNotebook.notebookState({
-      cellData: {
-        [cid]: {
-          code: "",
-          name: cellName,
-          edited: false,
-          serializedEditorState: null,
-          config: {
-            disabled: false,
-            hide_code: false,
-            column: null,
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cid]: {
+            code: "",
+            name: cellName,
+            edited: false,
+            serializedEditorState: null,
+            config: {
+              disabled: false,
+              hide_code: false,
+              column: null,
+            },
           },
         },
-      },
-    });
+      });
-    notebook.cellRuntime[cid] = createCellRuntimeState({
-      status: "idle",
-      output: null,
-      consoleOutputs: [],
-      interrupted: false,
-      errored: false,
-      stopped: false,
-      staleInputs: false,
-      runStartTimestamp: null,
-      lastRunStartTimestamp: null,
-      runElapsedTimeMs: null,
-      debuggerActive: false,
-      outline: null,
-    });
+      notebook.cellRuntime[cid] = createCellRuntimeState({
+        status: "idle",
+        output: null,
+        consoleOutputs: [],
+        interrupted: false,
+        errored: false,
+        stopped: false,
+        staleInputs: false,
+        runStartTimestamp: null,
+        lastRunStartTimestamp: null,
+        runElapsedTimeMs: null,
+        debuggerActive: false,
+        outline: null,
+      });
-    store.set(notebookAtom, notebook);
+      store.set(notebookAtom, notebook);
-    const { container } = render(
-      <TooltipProvider>
-        <Cell
-          cellId={cid}
-          mode={mode as AppMode}
-          canDelete={true}
-          userConfig={userConfig}
-          isCollapsed={false}
-          collapseCount={0}
-          canMoveX={false}
-          theme="light"
-          showPlaceholder={false}
-        />
-      </TooltipProvider>,
-      { wrapper },
-    );
+      const { container } = render(
+        <TooltipProvider>
+          <Cell
+            cellId={cid}
+            mode={mode as AppMode}
+            canDelete={true}
+            userConfig={userConfig}
+            isCollapsed={false}
+            collapseCount={0}
+            canMoveX={false}
+            theme="light"
+            showPlaceholder={false}
+          />
+        </TooltipProvider>,
+        { wrapper },
+      );
-    const cellElement = container.querySelector(`[data-cell-id="${cid}"]`);
-    expect(cellElement).toBeTruthy();
-    expect(cellElement?.getAttribute("data-cell-name")).toBe(cellName);
-  });
+      const cellElement = container.querySelector(`[data-cell-id="${cid}"]`);
+      expect(cellElement).toBeTruthy();
+      expect(cellElement?.getAttribute("data-cell-name")).toBe(cellName);
+    },
+  );
 });
 describe("Output data attributes", () => {

package/src/components/editor/actions/name-cell-input.tsx CHANGED Viewed

@@ -14,8 +14,10 @@ import { useOnMount } from "@/hooks/useLifecycle";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
-interface Props
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+interface Props extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "onChange"
+> {
   value: string;
   onChange: (newName: string) => void;
   placeholder?: string;

package/src/components/editor/actions/useCellActionButton.tsx CHANGED Viewed

@@ -65,8 +65,10 @@ import { useSplitCellCallback } from "../cell/useSplitCell";
 import { NameCellInput } from "./name-cell-input";
 import type { ActionButton } from "./types";
-export interface CellActionButtonProps
-  extends Pick<CellData, "name" | "config"> {
+export interface CellActionButtonProps extends Pick<
+  CellData,
+  "name" | "config"
+> {
   cellId: CellId;
   status: RuntimeState;
   hasOutput: boolean;

package/src/components/editor/cell/CellStatus.tsx CHANGED Viewed

@@ -16,11 +16,10 @@ import "./cell-status.css";
 import { formatDistanceToNow } from "date-fns";
 import { Time } from "@/utils/time";
-export interface CellStatusComponentProps
-  extends Pick<
-    CellRuntimeState,
-    "status" | "runStartTimestamp" | "interrupted" | "lastRunStartTimestamp"
-  > {
+export interface CellStatusComponentProps extends Pick<
+  CellRuntimeState,
+  "status" | "runStartTimestamp" | "interrupted" | "lastRunStartTimestamp"
+> {
   editing: boolean;
   edited: boolean;
   disabled: boolean;

package/src/components/editor/cell/cell-context-menu.tsx CHANGED Viewed

@@ -34,8 +34,10 @@ import {
   useCellActionButtons,
 } from "../actions/useCellActionButton";
-interface Props
-  extends Pick<CellActionButtonProps, "cellId" | "getEditorView"> {
+interface Props extends Pick<
+  CellActionButtonProps,
+  "cellId" | "getEditorView"
+> {
   children: React.ReactNode;
 }

package/src/components/editor/cell/code/cell-editor.tsx CHANGED Viewed

@@ -47,7 +47,8 @@ import { useSplitCellCallback } from "../useSplitCell";
 import { LanguageToggles } from "./language-toggle";
 export interface CellEditorProps
-  extends Pick<CellRuntimeState, "status">,
+  extends
+    Pick<CellRuntimeState, "status">,
     Pick<CellData, "id" | "code" | "serializedEditorState" | "config"> {
   runCell: () => void;
   theme: Theme;

package/src/components/editor/cell/toolbar.tsx CHANGED Viewed

@@ -27,7 +27,8 @@ const toolbarItemVariants = cva(
 );
 interface ToolbarItemProps
-  extends VariantProps<typeof toolbarItemVariants>,
+  extends
+    VariantProps<typeof toolbarItemVariants>,
     React.HTMLAttributes<HTMLButtonElement> {
   tooltip: React.ReactNode;
   disabled?: boolean;

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx CHANGED Viewed

@@ -311,18 +311,17 @@ const ActionButtons: React.FC<{
   );
 };
-interface VerticalCellProps
-  extends Pick<
-    CellRuntimeState,
-    | "output"
-    | "consoleOutputs"
-    | "status"
-    | "stopped"
-    | "errored"
-    | "interrupted"
-    | "staleInputs"
-    | "runStartTimestamp"
-  > {
+interface VerticalCellProps extends Pick<
+  CellRuntimeState,
+  | "output"
+  | "consoleOutputs"
+  | "status"
+  | "stopped"
+  | "errored"
+  | "interrupted"
+  | "staleInputs"
+  | "runStartTimestamp"
+> {
   cellOutputArea: "above" | "below";
   cellId: CellId;
   config: CellConfig;

package/src/components/storage/__tests__/storage-snippets.test.ts CHANGED Viewed

@@ -147,9 +147,8 @@ describe("download-file snippet", () => {
   });
   it("obstore gcs backend", () => {
-    expect(
-      downloadSnippet.getCode(makeCtx({ protocol: "gcs" })),
-    ).toMatchInlineSnapshot(`
+    expect(downloadSnippet.getCode(makeCtx({ protocol: "gcs" })))
+      .toMatchInlineSnapshot(`
       "from datetime import timedelta
       from obstore import sign
@@ -162,9 +161,8 @@ describe("download-file snippet", () => {
   });
   it("obstore cloudflare backend", () => {
-    expect(
-      downloadSnippet.getCode(makeCtx({ protocol: "cloudflare" })),
-    ).toMatchInlineSnapshot(`
+    expect(downloadSnippet.getCode(makeCtx({ protocol: "cloudflare" })))
+      .toMatchInlineSnapshot(`
       "from datetime import timedelta
       from obstore import sign