@marimo-team/islands 0.22.1-dev23 → 0.22.1-dev27

package/dist/main.js

@@ -44365,7 +44365,7 @@ ${c}
         }),
         E.map((e2, d2) => (0, import_jsx_runtime.jsx)(TabsContent, {
           value: e2.tabName,
-          className: "h-[400px] mt-1",
+          className: "h-[400px] mt-0",
           children: (0, import_jsx_runtime.jsx)(ChartPanel, {
             tableData: r,
             chartConfig: e2.config,
@@ -44447,7 +44447,7 @@ ${c}
       q
     ]);
     return (0, import_jsx_runtime.jsxs)("div", {
-      className: "flex flex-row gap-2 h-full rounded-md border pr-2",
+      className: "flex flex-row gap-2 h-full rounded-md border-t pr-2",
       children: [
         (0, import_jsx_runtime.jsxs)("div", {
           className: `relative flex flex-col gap-2 overflow-auto px-2 py-3 scrollbar-thin transition-width duration-200 ${O ? "w-8" : "w-[300px]"}`,
@@ -65401,7 +65401,7 @@ ${c}
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.22.1-dev23"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.22.1-dev27"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.22.1-dev23",
+  "version": "0.22.1-dev27",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -103,7 +103,6 @@
     "dequal": "^2.0.3",
     "dnd-core": "^16.0.1",
     "dompurify": "^3.3.1",
-    "eslint-plugin-header": "^3.1.1",
     "htm": "^3.1.1",
     "html-react-parser": "^5.2.14",
     "html-to-image": "1.11.13",
@@ -172,9 +171,9 @@
     "build": "cross-env vite build",
     "test": "vitest",
     "typecheck": "tsgo",
-    "lint": "run-s lint:biome lint:eslint lint:stylelint",
-    "lint:biome": "biome lint --diagnostic-level=warn --write .",
-    "lint:eslint": "cross-env TIMING=1 eslint src e2e-tests --fix",
+    "format": "oxfmt --config ../.oxfmtrc.json",
+    "lint": "run-s lint:oxlint lint:stylelint",
+    "lint:oxlint": "oxlint --fix",
     "lint:stylelint": "stylelint src/**/*.css --fix",
     "preview": "vite preview",
     "dev:quarto": "VITE_MARIMO_ISLANDS=true vite",
@@ -191,7 +190,6 @@
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.28.6",
     "@babel/preset-typescript": "^7.25.9",
-    "@biomejs/biome": "2.3.13",
     "@codecov/vite-plugin": "^1.9.1",
     "@csstools/postcss-light-dark-function": "^2.0.11",
     "@playwright/test": "^1.58.2",
@@ -209,24 +207,15 @@
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
     "@types/timestring": "^6.0.5",
-    "@typescript-eslint/eslint-plugin": "^7.15.0",
-    "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^5.1.4",
     "babel-plugin-react-compiler": "19.1.0-rc.3",
     "blob-polyfill": "^7.0.20220408",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-react-hooks": "^6.0.0-rc.1",
-    "eslint-plugin-react-you-might-not-need-an-effect": "^0.5.1",
-    "eslint-plugin-ssr-friendly": "^1.3.0",
-    "eslint-plugin-storybook": "^9.0.14",
-    "eslint-plugin-unicorn": "^54.0.0",
-    "eslint-plugin-vitest": "^0.4.1",
     "jsdom": "^24.1.3",
     "msw": "^2.12.7",
     "npm-run-all2": "^6.2.6",
+    "oxfmt": "^0.42.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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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