@marimo-team/islands 0.22.1-dev3 → 0.22.1-dev30

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

@@ -13,7 +13,7 @@ import {
   XIcon,
 } from "lucide-react";
 import type { JSX } from "react";
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import { type UseFormReturn, useForm } from "react-hook-form";
 import useResizeObserver from "use-resize-observer";
 import { PythonIcon } from "@/components/editor/cell/code/icons";
@@ -61,6 +61,7 @@ export interface TablePanelProps {
   totalRows: number | TooManyRows;
   columns: number;
   displayHeader: boolean;
+  onCloseChartBuilder?: () => void;
   getDataUrl?: GetDataUrl;
   fieldTypes?: FieldTypesWithExternalType | null;
 }
@@ -74,12 +75,33 @@ export const TablePanel: React.FC<TablePanelProps> = ({
   getDataUrl,
   fieldTypes,
   displayHeader,
+  onCloseChartBuilder,
 }) => {
   const [tabsMap, saveTabsMap] = useAtom(tabsStorageAtom);
   const tabs = cellId ? (tabsMap.get(cellId) ?? []) : [];
 
-  const [tabNum, setTabNum] = useState(0);
   const [selectedTab, setSelectedTab] = useState(DEFAULT_TAB_NAME);
+  const [tabCounter, setTabCounter] = useState(tabs.length);
+  const prevDisplayHeader = useRef(displayHeader);
+
+  // Auto-create a default chart tab when chart builder opens with no tabs
+  if (
+    displayHeader &&
+    !prevDisplayHeader.current &&
+    tabs.length === 0 &&
+    cellId
+  ) {
+    prevDisplayHeader.current = displayHeader;
+    const tabName = getChartTabName(0, NEW_CHART_TYPE);
+    const newTabs = new Map(tabsMap);
+    newTabs.set(cellId, [
+      { tabName, chartType: NEW_CHART_TYPE, config: getChartDefaults() },
+    ]);
+    saveTabsMap(newTabs);
+    setTabCounter(1);
+    setSelectedTab(tabName);
+  }
+  prevDisplayHeader.current = displayHeader;
 
   if (!displayHeader || (tabs.length === 0 && !displayHeader)) {
     return dataTable;
@@ -89,7 +111,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     if (!cellId) {
       return;
     }
-    const tabName = getChartTabName(tabNum, NEW_CHART_TYPE);
+    const tabName = getChartTabName(tabCounter, NEW_CHART_TYPE);
 
     const newTabs = new Map(tabsMap);
     newTabs.set(cellId, [
@@ -102,7 +124,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     ]);
 
     saveTabsMap(newTabs);
-    setTabNum(tabNum + 1);
+    setTabCounter(tabCounter + 1);
     setSelectedTab(tabName);
   };
 
@@ -110,14 +132,21 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     if (!cellId) {
       return;
     }
+    const deletedIndex = tabs.findIndex((tab) => tab.tabName === tabName);
+    const remaining = tabs.filter((tab) => tab.tabName !== tabName);
     const newTabs = new Map(tabsMap);
-    newTabs.set(
-      cellId,
-      tabs.filter((tab) => tab.tabName !== tabName),
-    );
+    newTabs.set(cellId, remaining);
     saveTabsMap(newTabs);
-    setSelectedTab(DEFAULT_TAB_NAME);
-    setTabNum(tabNum - 1);
+
+    if (remaining.length === 0) {
+      onCloseChartBuilder?.();
+    } else if (tabName === selectedTab) {
+      if (deletedIndex < remaining.length) {
+        setSelectedTab(remaining[deletedIndex].tabName);
+      } else {
+        setSelectedTab(remaining[remaining.length - 1].tabName);
+      }
+    }
   };
 
   const saveTabChart = ({
@@ -178,7 +207,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
 
   return (
     <Tabs value={selectedTab} className="-mt-1">
-      <TabsList>
+      <TabsList part="table-tabs">
         <TabsTrigger
           className="text-xs"
           value={DEFAULT_TAB_NAME}
@@ -228,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}
@@ -446,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/charts/components/chart-items.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import * as SelectPrimitive from "@radix-ui/react-select";
 import { ChevronDown } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
 import React from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import type { z } from "zod";

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -72,7 +72,7 @@ export const ColumnExplorerPanel = ({
   });
 
   return (
-    <div className="mt-5 mb-3">
+    <div className="mb-3">
       <span className="text-xs font-semibold ml-2 flex">
         {prettifyRowColumnCount(totalRows, totalColumns, locale)}
         <CopyClipboardIcon

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/columns.tsx

@@ -1,7 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 "use no memo";
 
-import { PopoverClose } from "@radix-ui/react-popover";
+import { Popover as PopoverPrimitive } from "radix-ui";
+
+const PopoverClose = PopoverPrimitive.Close;
+
 import type { Column, ColumnDef } from "@tanstack/react-table";
 import { formatDate, isValid } from "date-fns";
 import { useLocale, useNumberFormatter } from "react-aria";

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/data-table.tsx

@@ -283,7 +283,10 @@ const DataTableInternal = <TData,>({
     <div className={cn(wrapperClassName, "flex flex-col space-y-1")}>
       <FilterPills filters={filters} table={table} />
       <CellSelectionProvider>
-        <div className={cn(className || "rounded-md border overflow-hidden")}>
+        <div
+          part="table-wrapper"
+          className={cn(className || "rounded-md border overflow-hidden")}
+        >
           <TableTopBar
             enableSearch={enableSearch}
             searchQuery={searchQuery}
@@ -313,6 +316,8 @@ const DataTableInternal = <TData,>({
           </Table>
         </div>
         <TableBottomBar
+          part="table-footer"
+          className="border-t border-border pt-1.5 pb-0.5"
           totalColumns={totalColumns}
           pagination={pagination}
           selection={selection}

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/loading-table.tsx

@@ -24,7 +24,10 @@ export const LoadingTable = ({
 
   return (
     <div className={cn(wrapperClassName, "flex flex-col space-y-2")}>
-      <div className={cn(className || "rounded-md border")}>
+      <div
+        part="table-wrapper"
+        className={cn(className || "rounded-md border")}
+      >
         <Table>
           <TableHeader>
             {Array.from({ length: 1 }).map((_, i) => (

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/data-table/range-focus/cell-selection-stats.tsx

@@ -34,7 +34,9 @@ export const CellSelectionStats = <TData,>({
   if (dataCellCount < 2) {
     return (
       <Tooltip content="Select multiple cells to see stats">
-        <span className={cn("text-sm text-muted-foreground italic", className)}>
+        <span
+          className={cn("text-xs text-muted-foreground/80 italic", className)}
+        >
           No selection
         </span>
       </Tooltip>

package/src/components/data-table/row-viewer-panel/row-viewer.tsx

@@ -247,7 +247,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
 
   return (
     <div
-      className="flex flex-col gap-3 mt-4 focus:outline-hidden"
+      className="flex flex-col gap-3 focus:outline-hidden"
       ref={panelRef}
       tabIndex={-1}
       onKeyDown={handleKeyDown}

package/src/components/data-table/table-explorer-panel/table-explorer-panel.tsx

@@ -42,7 +42,7 @@ export interface TableExplorerPanelProps {
 }
 
 const tabTriggerClassName =
-  "text-xs uppercase tracking-wide font-semibold cursor-pointer transition-colors";
+  "text-[13px] uppercase tracking-wide font-semibold cursor-pointer transition-colors";
 const activeClassName = "text-primary";
 const inactiveClassName = "hover:text-foreground";
 
@@ -110,7 +110,7 @@ export const TableExplorerPanel: React.FC<TableExplorerPanelProps> = ({
     <Tabs
       value={resolvedTab}
       onValueChange={(value) => onTabChange(value as PanelType)}
-      className="h-full flex flex-col min-w-[350px]"
+      className="flex flex-col min-w-[350px]"
     >
       <Fill name={SlotNames.CONTEXT_AWARE_PANEL_HEADER}>
         <div className="flex items-center gap-1">

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/ai/add-cell-with-ai.tsx

@@ -122,7 +122,7 @@ export const AddCellWithAI: React.FC<{
     transport: new StreamingChunkTransport(
       {
         api: runtimeManager.getAiURL("completion").toString(),
-        headers: runtimeManager.headers(),
+        headers: () => runtimeManager.headers(),
         prepareSendMessagesRequest: async (options) => {
           const completionBody = await buildCompletionRequestBody(
             options.messages,
@@ -136,6 +136,7 @@ export const AddCellWithAI: React.FC<{
           };
 
           return {
+            api: runtimeManager.getAiURL("completion").toString(),
             body: body,
           };
         },

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;