@marimo-team/islands 0.25.1-dev4 → 0.25.1-dev40

package/dist/{swimlanes-42K2YHIH-BkSDcqDT.js → swimlanes-42K2YHIH-B_pMf0J4.js}

@@ -1,15 +1,15 @@
-import "./chunk-75Z2AOVW-5_HsvXwr.js";
+import "./chunk-75Z2AOVW-C4AOleKf.js";
 import { n as e } from "./src-CA_m4ONl.js";
 import { n as t } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
-import "./chunk-DU6HZSFF-BUgAHvnM.js";
-import "./chunk-P2QGCYS3-C0iGU29N.js";
-import "./chunk-PWAF6VOD-CTFCL0jI.js";
-import "./chunk-GMAD6QVW-Czynz8aA.js";
-import "./chunk-4HAMMTFA-D2qv8E0X.js";
-import "./chunk-GVQU2GXP-yQEdulRS.js";
-import "./chunk-L3NEJ4N5-DwRWnDDK.js";
-import { o as n } from "./chunk-OSK3NFVY-BBKU_Ign.js";
-import { c as r } from "./mermaid-DPNuhemn.js";
+import "./chunk-DU6HZSFF-1TwWR6gh.js";
+import "./chunk-P2QGCYS3-0TAWai9C.js";
+import "./chunk-PWAF6VOD-lNxB9k8z.js";
+import "./chunk-GMAD6QVW-vStrMz2P.js";
+import "./chunk-4HAMMTFA-BPTTOOC5.js";
+import "./chunk-GVQU2GXP-2HwWgs4u.js";
+import "./chunk-L3NEJ4N5-RhC7i0I2.js";
+import { o as n } from "./chunk-OSK3NFVY-CZV09N-U.js";
+import { c as r } from "./mermaid-Dnzoxjt1.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/swimlanes-42K2YHIH.mjs
 var i = 5, a = 1e-5, o = 1e-6;
 function s(e) {

package/dist/swimlanesDiagram-VR7AAH4N-Ctgy-yGP.js

@@ -0,0 +1,30 @@
+import "./chunk-75Z2AOVW-C4AOleKf.js";
+import "./src-CA_m4ONl.js";
+import { n as e } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
+import "./chunk-DU6HZSFF-1TwWR6gh.js";
+import "./chunk-P2QGCYS3-0TAWai9C.js";
+import "./chunk-PWAF6VOD-lNxB9k8z.js";
+import "./chunk-GMAD6QVW-vStrMz2P.js";
+import "./chunk-4HAMMTFA-BPTTOOC5.js";
+import "./chunk-GVQU2GXP-2HwWgs4u.js";
+import "./chunk-L3NEJ4N5-RhC7i0I2.js";
+import "./chunk-OSK3NFVY-CZV09N-U.js";
+import "./mermaid-Dnzoxjt1.js";
+import "./chunk-F27PBJKO-DMI1PBe4.js";
+import "./chunk-XXDRQBXY-Dnl5VBqG.js";
+import "./chunk-POPQ4Y6H-Cc3_56GX.js";
+import { r as t, t as n } from "./chunk-SHT3W25Y-CrEPyWy1.js";
+//#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/swimlanesDiagram-VR7AAH4N.mjs
+var r = n({
+	defaultLayout: "swimlane",
+	styles: /* @__PURE__ */ e((e) => `${t(e)}
+  .swimlane.cluster rect {
+    stroke: ${e.clusterBorder} !important;
+  }
+  [data-look="neo"].cluster rect {
+    filter: none;
+  }
+`, "getStyles")
+});
+//#endregion
+export { r as diagram };

package/dist/{timeline-definition-24CTP7MA-BuqJUIRZ.js → timeline-definition-24CTP7MA-DTXFjTTM.js}

@@ -1,9 +1,9 @@
 import { t as e } from "./arc-7ra3iNdN.js";
-import { p as t } from "./chunk-75Z2AOVW-5_HsvXwr.js";
+import { p as t } from "./chunk-75Z2AOVW-C4AOleKf.js";
 import { n, t as r } from "./src-CA_m4ONl.js";
 import { n as i, t as a } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
-import { $ as o, J as s, a as c, b as l, et as u, nt as d, o as f, x as p } from "./chunk-DU6HZSFF-BUgAHvnM.js";
-import { p as m } from "./mermaid-DPNuhemn.js";
+import { $ as o, J as s, a as c, b as l, et as u, nt as d, o as f, x as p } from "./chunk-DU6HZSFF-1TwWR6gh.js";
+import { p as m } from "./mermaid-Dnzoxjt1.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/timeline-definition-24CTP7MA.mjs
 var h = (function() {
 	var e = /* @__PURE__ */ i(function(e, t, n, r) {

package/dist/{vega-component-CNf5gcrm.js → vega-component-tFOzgarw.js}

@@ -11,10 +11,10 @@ import { A as p, n as ee } from "./useTheme-DzXmYZ5V.js";
 import { c as m } from "./arrays-CN1djC4k.js";
 import { t as te } from "./objects-CzUgoMIF.js";
 import { t as h } from "./useAsyncData-BD6AStMt.js";
-import { a as ne, i as re, n as ie, t as g } from "./formats-C8rLgZT9.js";
-import { M as ae, n as oe } from "./vega-loader.browser-D95WfUcj.js";
-import { t as se } from "./react-vega-5AcMW8gG.js";
-import { a as ce, n as _ } from "./loader-D2W4oM-3.js";
+import { a as ne, i as re, n as ie, t as g } from "./formats-Cl_67ghI.js";
+import { M as ae, n as oe } from "./vega-loader.browser-DNST6uVf.js";
+import { t as se } from "./react-vega-ewj7q_U5.js";
+import { a as ce, n as _ } from "./loader-DEZSzvma.js";
 import { t as le } from "./useDeepCompareMemoize-D_HNdyvI.js";
 import { t as ue } from "./semaphore-89jsoHtS.js";
 import { t as de } from "./use-vega-container-remeasure-4DwJbPWu.js";

package/dist/{vega-embed-container-CbnTccZi.js → vega-embed-container-sSR5hAsy.js}

@@ -2,8 +2,8 @@ import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-ofJbxM4x.js";
 import { t as n } from "./compiler-runtime-Cj8ZWiNS.js";
 import { t as r } from "./jsx-runtime-DgDPJV9S.js";
-import { M as i } from "./vega-loader.browser-D95WfUcj.js";
-import { n as a } from "./react-vega-5AcMW8gG.js";
+import { M as i } from "./vega-loader.browser-DNST6uVf.js";
+import { n as a } from "./react-vega-ewj7q_U5.js";
 import { t as o } from "./use-vega-container-remeasure-4DwJbPWu.js";
 //#region src/components/charts/vega-embed-container.tsx
 var s = n(), c = /* @__PURE__ */ e(t(), 1), l = r();

package/dist/{vega-loader.browser-D95WfUcj.js → vega-loader.browser-DNST6uVf.js}

@@ -237,8 +237,8 @@ function Ye(e) {
 		if ("spec" in e) return Ye(e.spec);
 	}
 }
-function Xe(t) {
-	return !t || Object.keys(t).length === 0 ? "auto" : e.mapValues(t, (e) => e === "geometry" || e === "date" || e === "time" ? "string" : e === "datetime" ? "date" : e);
+function Xe(t, { parseDates: n = !1 } = {}) {
+	return !t || Object.keys(t).length === 0 ? "auto" : e.mapValues(t, (e) => e === "geometry" ? "string" : e === "date" ? n ? "date" : "string" : e === "time" ? "string" : e === "datetime" ? "date" : e);
 }
 //#endregion
 //#region ../node_modules/.pnpm/d3-dsv@3.0.1/node_modules/d3-dsv/src/dsv.js

package/dist/{vennDiagram-4TSXK5OY-CTUlJ2PK.js → vennDiagram-4TSXK5OY-BPHjZo0R.js}

@@ -1,9 +1,9 @@
-import { i as e } from "./chunk-75Z2AOVW-5_HsvXwr.js";
+import { i as e } from "./chunk-75Z2AOVW-C4AOleKf.js";
 import { t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
-import { $ as r, H as i, K as a, U as o, a as s, b as c, c as l, et as u, f as d, nt as f, tt as p, v as m, w as h, y as g } from "./chunk-DU6HZSFF-BUgAHvnM.js";
+import { $ as r, H as i, K as a, U as o, a as s, b as c, c as l, et as u, f as d, nt as f, tt as p, v as m, w as h, y as g } from "./chunk-DU6HZSFF-1TwWR6gh.js";
 import { t as _ } from "./rough.esm-CtV9AnV1.js";
-import { p as v } from "./mermaid-DPNuhemn.js";
+import { p as v } from "./mermaid-Dnzoxjt1.js";
 //#region ../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/transparentize.js
 var y = (e, t) => p(e, "a", -t), b = 1e-10;
 function x(e, t) {

package/dist/{wardleyDiagram-VM6X3IG4-3evLUb0M.js → wardleyDiagram-VM6X3IG4-6fTLYBuD.js}

@@ -1,8 +1,8 @@
-import { i as e } from "./chunk-75Z2AOVW-5_HsvXwr.js";
+import { i as e } from "./chunk-75Z2AOVW-C4AOleKf.js";
 import { n as t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
-import { D as r, H as i, K as a, U as o, a as s, b as c, c as l, v as u, w as d, x as f, y as p } from "./chunk-DU6HZSFF-BUgAHvnM.js";
-import { p as m } from "./mermaid-DPNuhemn.js";
+import { D as r, H as i, K as a, U as o, a as s, b as c, c as l, v as u, w as d, x as f, y as p } from "./chunk-DU6HZSFF-1TwWR6gh.js";
+import { p as m } from "./mermaid-Dnzoxjt1.js";
 import { n as h } from "./mermaid-parser.core-DxuSfYwJ.js";
 import { t as g } from "./chunk-JWPE2WC7-DJvv1t8U.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/wardleyDiagram-VM6X3IG4.mjs

package/dist/{xychartDiagram-S5SC5T6Z-DL2E3K8-.js → xychartDiagram-S5SC5T6Z-BYjwjrzE.js}

@@ -2,14 +2,14 @@ import { t as e } from "./linear-Cnaq3Tfb.js";
 import { n as t } from "./ordinal-c7efuCSS.js";
 import { t as n } from "./range-BAIvbVHp.js";
 import { q as r } from "./cubic-OaEBhQPK.js";
-import { i } from "./chunk-75Z2AOVW-5_HsvXwr.js";
+import { i } from "./chunk-75Z2AOVW-C4AOleKf.js";
 import { n as a } from "./init-Ix4LXMlt.js";
 import { n as o } from "./src-CA_m4ONl.js";
 import { n as s } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
-import { D as c, H as l, K as u, U as d, a as f, b as p, c as m, f as h, v as g, w as _, y as v, z as y } from "./chunk-DU6HZSFF-BUgAHvnM.js";
-import "./chunk-PWAF6VOD-CTFCL0jI.js";
-import { t as b } from "./chunk-GMAD6QVW-Czynz8aA.js";
-import { p as x } from "./mermaid-DPNuhemn.js";
+import { D as c, H as l, K as u, U as d, a as f, b as p, c as m, f as h, v as g, w as _, y as v, z as y } from "./chunk-DU6HZSFF-1TwWR6gh.js";
+import "./chunk-PWAF6VOD-lNxB9k8z.js";
+import { t as b } from "./chunk-GMAD6QVW-vStrMz2P.js";
+import { p as x } from "./mermaid-Dnzoxjt1.js";
 //#region ../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/band.js
 function S() {
 	var e = t().unknown(void 0), r = e.domain, i = e.range, o = 0, s = 1, c, l, u = !1, d = 0, f = 0, p = .5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.1-dev4",
+  "version": "0.25.1-dev40",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -198,7 +198,6 @@
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
     "@types/dompurify": "^3.2.0",
-    "@types/katex": "^0.16.8",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.13.3",
     "@types/plotly.js": "^2.35.16",

package/src/__mocks__/common.ts

@@ -101,9 +101,9 @@ export const SetupMocks = {
     const unobserve = vi.fn();
     const disconnect = vi.fn();
     global.ResizeObserver = class MockResizeObserver {
-      observe = observe;
-      unobserve = unobserve;
-      disconnect = disconnect;
+      public observe = observe;
+      public unobserve = unobserve;
+      public disconnect = disconnect;
     } as unknown as typeof ResizeObserver;
     return { observe, unobserve, disconnect };
   },

package/src/__tests__/CellStatus.test.tsx

@@ -57,7 +57,7 @@ describe("CellStatusComponent", () => {
 
   beforeEach(() => {
     global.Date = class extends Date {
-      static override now() {
+      public static override now() {
         return mockDate.getTime();
       }
     } as typeof Date;

package/src/__tests__/setup.ts

@@ -9,29 +9,29 @@ import "blob-polyfill";
 // if we need to test ResizeObserver functionality
 // we can use a library like "resize-observer-polyfill"
 globalThis.ResizeObserver ??= class {
-  observe(_target: Element) {
+  public observe(_target: Element) {
     /* noop */
   }
-  unobserve(_target: Element) {
+  public unobserve(_target: Element) {
     /* noop */
   }
-  disconnect() {
+  public disconnect() {
     /* noop */
   }
 } as never;
 
 // mock implementation because jsdom doesn't support IntersectionObserver
 globalThis.IntersectionObserver ??= class {
-  observe(_target: Element) {
+  public observe(_target: Element) {
     /* noop */
   }
-  unobserve(_target: Element) {
+  public unobserve(_target: Element) {
     /* noop */
   }
-  disconnect() {
+  public disconnect() {
     /* noop */
   }
-  takeRecords() {
+  public takeRecords() {
     return [];
   }
 } as never;

package/src/components/app-config/ai-config.tsx

@@ -59,6 +59,7 @@ import {
   listModelsForAiSettings,
 } from "../ai/ai-utils";
 import { getTagColour } from "../ai/display-helpers";
+import { PairWithAgentBanner } from "../editor/actions/pair-with-agent";
 import {
   Accordion,
   AccordionContent,
@@ -2005,6 +2006,7 @@ export const AiConfig: React.FC<AiConfigProps> = ({
       {aiEnabled !== false && (
         <>
           <TabsContent value="ai-providers">
+            <PairWithAgentBanner className="mb-4" />
             <AiProvidersConfig
               form={form}
               config={config}

package/src/components/app-config/optional-features.tsx

@@ -107,7 +107,7 @@ const OPTIONAL_DEPENDENCIES: OptionalFeature[] = [
   },
   {
     id: "lens",
-    packagesRequired: [{ name: "marimo-lens", minVersion: "0.2.0" }],
+    packagesRequired: [{ name: "marimo-lens", minVersion: "0.2.3" }],
     additionalPackageInstalls: [],
     description: "Select outputs for agents",
   },

package/src/components/chat/chat-panel.tsx

@@ -64,6 +64,10 @@ import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
 import { AIModelDropdown } from "../ai/ai-model-dropdown";
 import { useOpenSettingsToTab } from "../app-config/state";
+import {
+  PairWithAgentBanner,
+  PairWithAgentButton,
+} from "../editor/actions/pair-with-agent";
 import { PairWithAgentModal } from "../editor/actions/pair-with-agent-modal";
 import { PromptInput } from "../editor/ai/add-cell-with-ai";
 import {
@@ -163,6 +167,9 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
         </Button>
       </Tooltip>
       <div className="flex items-center gap-2">
+        <Tooltip content="Connect your agent">
+          <PairWithAgentButton className="mr-1" label="Connect" />
+        </Tooltip>
         <MCPStatusIndicator />
         <Tooltip content="AI Settings">
           <Button
@@ -493,7 +500,7 @@ const PairWithAgentCallout: React.FC<{
       onClick={onPairWithAgent}
     >
       <SparklesIcon className="h-3.5 w-3.5 shrink-0" />
-      <span>Work on this notebook with your own agent</span>
+      <span>Connect your own agent to this notebook</span>
       <ArrowRightIcon className="h-3 w-3 shrink-0" />
     </Button>
   );
@@ -509,13 +516,17 @@ const ChatPanel = () => {
         title="Chat with AI"
         description="No AI provider configured or Chat model not selected"
         action={
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => handleClick("ai", "ai-providers")}
-          >
-            Edit AI settings
-          </Button>
+          <div className="flex flex-col gap-3">
+            <Button
+              variant="outline"
+              size="sm"
+              className="self-start"
+              onClick={() => handleClick("ai", "ai-providers")}
+            >
+              Edit AI settings
+            </Button>
+            <PairWithAgentBanner />
+          </div>
         }
         icon={<BotMessageSquareIcon />}
       />

package/src/components/data-table/charts/__tests__/chart-panel.test.tsx

@@ -0,0 +1,286 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { Tooltip } from "radix-ui";
+import type { ComponentProps } from "react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { cellId } from "@/__tests__/branded";
+import { LazyVegaEmbed } from "@/components/charts/lazy";
+import { vegaLoader } from "@/plugins/impl/vega/loader";
+import { ChartPanel, TablePanel, type TablePanelProps } from "../charts";
+import { getChartTabName, tabsStorageAtom } from "../storage";
+import { ChartType, NONE_VALUE } from "../types";
+
+vi.mock("@/components/charts/lazy", () => ({
+  LazyVegaEmbed: vi.fn(() => null),
+}));
+
+beforeAll(() => {
+  SetupMocks.resizeObserver();
+});
+
+describe("ChartPanel", () => {
+  it.each([undefined, null, []] as const)(
+    "infers the full CSV through TablePanel without backend metadata (%s)",
+    async (fieldTypes) => {
+      vi.spyOn(vegaLoader, "load").mockResolvedValue(
+        "value,index\n,0\n2.5,1\n",
+      );
+      const store = createStore();
+      const id = cellId("csv-inference");
+      const tabName = getChartTabName(0, ChartType.BAR);
+      store.set(
+        tabsStorageAtom,
+        new Map([
+          [
+            id,
+            [
+              {
+                tabName,
+                chartType: ChartType.BAR,
+                config: {
+                  general: {
+                    xColumn: { field: "value", type: "number" },
+                    yColumn: {
+                      field: "index",
+                      type: "integer",
+                      aggregate: NONE_VALUE,
+                    },
+                  },
+                },
+              },
+            ],
+          ],
+        ]),
+      );
+      const sample = [{ value: null }];
+      const SampleTable = (_props: { data: typeof sample }) => null;
+      const props: TablePanelProps = {
+        cellId: id,
+        data: sample,
+        dataTable: <SampleTable data={sample} />,
+        totalRows: 2,
+        columns: 1,
+        displayHeader: true,
+        fieldTypes: fieldTypes == null ? fieldTypes : [...fieldTypes],
+        rowHeaders: [["index", ["integer", "int64"]]],
+        getDataUrl: vi
+          .fn()
+          .mockResolvedValue({ data_url: "chart.csv", format: "csv" }),
+      };
+      const { getByRole } = render(
+        <Provider store={store}>
+          <Tooltip.Provider>
+            <TablePanel {...props} />
+          </Tooltip.Provider>
+        </Provider>,
+      );
+      fireEvent.click(getByRole("tab", { name: tabName }));
+      await waitFor(() => {
+        expect(vi.mocked(LazyVegaEmbed).mock.lastCall?.[0].spec).toEqual(
+          expect.objectContaining({
+            data: {
+              values: [
+                { value: null, index: 0 },
+                { value: 2.5, index: 1 },
+              ],
+            },
+          }),
+        );
+      });
+    },
+  );
+
+  it("reloads CSV only when column types change, not their array identity", async () => {
+    vi.spyOn(vegaLoader, "load").mockResolvedValue("value\n001\n");
+    const getDataUrl = vi.fn().mockResolvedValue({
+      data_url: "chart.csv",
+      format: "csv",
+    });
+    const props: ComponentProps<typeof ChartPanel> = {
+      tableData: [{ value: "001" }],
+      chartConfig: {
+        general: {
+          xColumn: { field: "value", type: "string" },
+          yColumn: { field: "value", type: "integer", aggregate: NONE_VALUE },
+        },
+      },
+      chartType: ChartType.BAR,
+      saveChart: vi.fn(),
+      saveChartType: vi.fn(),
+      getDataUrl,
+      isLargeDataset: false,
+    };
+    const panel = (
+      fieldTypes: ComponentProps<typeof ChartPanel>["fieldTypes"],
+    ) => (
+      <Tooltip.Provider>
+        <ChartPanel {...props} fieldTypes={fieldTypes} />
+      </Tooltip.Provider>
+    );
+    const expectValues = async (value: string | number) => {
+      await waitFor(() => {
+        expect(vi.mocked(LazyVegaEmbed).mock.lastCall?.[0].spec).toEqual(
+          expect.objectContaining({ data: { values: [{ value }] } }),
+        );
+      });
+    };
+
+    const { rerender } = render(panel([["value", ["string", "object"]]]));
+    await expectValues("001");
+    expect(getDataUrl).toHaveBeenCalledTimes(1);
+
+    rerender(panel([["value", ["string", "object"]]]));
+    await expectValues("001");
+    expect(getDataUrl).toHaveBeenCalledTimes(1);
+
+    rerender(panel([["value", ["integer", "int64"]]]));
+    await expectValues(1);
+    expect(getDataUrl).toHaveBeenCalledTimes(2);
+  });
+
+  it("uses column types to parse numeric CSV values without coercing text", async () => {
+    vi.spyOn(vegaLoader, "load").mockResolvedValue(
+      "a.b,n,label,day,timestamp,active,duration\ninf,1,inf,2024-01-01,2024-01-01T12:00:00Z,True,1 days\n-inf,2,001,2024-01-02,2024-01-02T12:00:00Z,False,2 days\n2.5,3,2024-01-03,2024-01-03,2024-01-03T12:00:00Z,True,3 days\n,4,,,,,\n",
+    );
+
+    render(
+      <Tooltip.Provider>
+        <ChartPanel
+          tableData={[{ "a.b": 1, n: 1 }]}
+          chartConfig={{
+            general: {
+              xColumn: { field: "a.b", type: "number" },
+              yColumn: { field: "n", type: "integer", aggregate: NONE_VALUE },
+            },
+          }}
+          chartType={ChartType.BAR}
+          saveChart={vi.fn()}
+          saveChartType={vi.fn()}
+          getDataUrl={vi.fn().mockResolvedValue({
+            data_url: "chart.csv",
+            format: "csv",
+          })}
+          fieldTypes={[
+            ["a.b", ["number", "float64"]],
+            ["n", ["integer", "int64"]],
+            ["label", ["string", "object"]],
+            ["day", ["date", "date"]],
+            ["timestamp", ["datetime", "datetime64[ns]"]],
+            ["active", ["boolean", "bool"]],
+            ["duration", ["unknown", "timedelta64[ns]"]],
+          ]}
+          isLargeDataset={false}
+        />
+      </Tooltip.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(vi.mocked(LazyVegaEmbed).mock.lastCall?.[0].spec).toEqual(
+        expect.objectContaining({
+          data: {
+            values: [
+              {
+                "a.b": Infinity,
+                n: 1,
+                label: "inf",
+                day: new Date("2024-01-01"),
+                timestamp: new Date("2024-01-01T12:00:00Z"),
+                active: true,
+                duration: "1 days",
+              },
+              {
+                "a.b": -Infinity,
+                n: 2,
+                label: "001",
+                day: new Date("2024-01-02"),
+                timestamp: new Date("2024-01-02T12:00:00Z"),
+                active: false,
+                duration: "2 days",
+              },
+              {
+                "a.b": 2.5,
+                n: 3,
+                label: "2024-01-03",
+                day: new Date("2024-01-03"),
+                timestamp: new Date("2024-01-03T12:00:00Z"),
+                active: true,
+                duration: "3 days",
+              },
+              {
+                "a.b": null,
+                n: 4,
+                label: null,
+                day: "",
+                timestamp: "",
+                active: null,
+                duration: "",
+              },
+            ],
+          },
+        }),
+      );
+    });
+  });
+
+  it.each([true, false])(
+    "keeps dotted CSV columns aligned with the chart encodings (schema: %s)",
+    async (hasSchema) => {
+      vi.spyOn(vegaLoader, "load").mockResolvedValue("a.b,n\n1,1\n2,2\n3,3\n");
+
+      render(
+        <Tooltip.Provider>
+          <ChartPanel
+            tableData={[{ "a.b": 1, n: 1 }]}
+            chartConfig={{
+              general: {
+                xColumn: { field: "a.b", type: "number" },
+                yColumn: {
+                  field: "n",
+                  type: "number",
+                  aggregate: NONE_VALUE,
+                },
+              },
+            }}
+            chartType={ChartType.BAR}
+            saveChart={vi.fn()}
+            saveChartType={vi.fn()}
+            getDataUrl={vi.fn().mockResolvedValue({
+              data_url: "chart.csv",
+              format: "csv",
+            })}
+            fieldTypes={
+              hasSchema
+                ? [
+                    ["a.b", ["number", "float64"]],
+                    ["n", ["integer", "int64"]],
+                  ]
+                : undefined
+            }
+            isLargeDataset={false}
+          />
+        </Tooltip.Provider>,
+      );
+
+      await waitFor(() => {
+        expect(vi.mocked(LazyVegaEmbed).mock.lastCall?.[0].spec).toEqual(
+          expect.objectContaining({
+            data: {
+              values: [
+                { "a.b": 1, n: 1 },
+                { "a.b": 2, n: 2 },
+                { "a.b": 3, n: 3 },
+              ],
+            },
+            encoding: expect.objectContaining({
+              x: expect.objectContaining({ field: "a\\.b" }),
+              y: expect.objectContaining({ field: "n" }),
+            }),
+          }),
+        );
+      });
+    },
+  );
+});