@marimo-team/islands 0.25.2-dev99 → 0.25.3-dev141

package/dist/{use-vega-container-remeasure-4DwJbPWu.js → use-vega-container-remeasure-Bz4PZMtt.js}

@@ -1,6 +1,6 @@
 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 } from "./react-sHtZdjeP.js";
+import { t as n } from "./compiler-runtime-CldRdSsv.js";
 //#region src/plugins/impl/vega/use-vega-container-remeasure.ts
 var r = n(), i = /* @__PURE__ */ e(t(), 1);
 function a(e, t) {

package/dist/{useAsyncData-rkAlR_vh.js → useAsyncData-Deh5kszT.js}

@@ -1,7 +1,7 @@
 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 { A as r } from "./useTheme-BwSgeAFb.js";
+import { t } from "./react-sHtZdjeP.js";
+import { t as n } from "./compiler-runtime-CldRdSsv.js";
+import { A as r } from "./useTheme-CRnjkku0.js";
 import { t as i } from "./invariant-DLmrl-hA.js";
 //#region src/hooks/useAsyncData.ts
 var a = n(), o = /* @__PURE__ */ e(t(), 1), s = {

package/dist/{useDateFormatter-C-tz65rD.js → useDateFormatter-D8XruNGG.js}

@@ -1,7 +1,7 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { t } from "./react-ofJbxM4x.js";
-import { h as n } from "./tooltip-CuNWg2ay.js";
-import { i as r } from "./label-DQO1jFjf.js";
+import { t } from "./react-sHtZdjeP.js";
+import { h as n } from "./tooltip-BO1REbqs.js";
+import { i as r } from "./label-BDKF3Afc.js";
 var i = n("chart-pie", [["path", {
 	d: "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z",
 	key: "pzmjnu"
@@ -131,7 +131,7 @@ function _(e, t) {
 	throw Error("Unexpected hour cycle result");
 }
 //#endregion
-//#region ../node_modules/.pnpm/react-aria@3.52.1_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-aria/dist/private/i18n/useDateFormatter.mjs
+//#region ../node_modules/.pnpm/react-aria@3.52.1_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/react-aria/dist/private/i18n/useDateFormatter.mjs
 function v(e) {
 	e = c(e ?? {}, y);
 	let { locale: t } = r();

package/dist/{useDeepCompareMemoize-BlHFBj5_.js → useDeepCompareMemoize-DXwzRINI.js}

@@ -1,6 +1,6 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { t } from "./react-ofJbxM4x.js";
-import { k as n } from "./useTheme-BwSgeAFb.js";
+import { t } from "./react-sHtZdjeP.js";
+import { k as n } from "./useTheme-CRnjkku0.js";
 //#region src/hooks/useDeepCompareMemoize.ts
 var r = /* @__PURE__ */ e(t(), 1);
 function i(e) {

package/dist/{useIframeCapabilities-C1Bt04Iz.js → useIframeCapabilities-DBETvvPl.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./compiler-runtime-Cj8ZWiNS.js";
-import { t } from "./capabilities-A5jrzjCJ.js";
+import { t as e } from "./compiler-runtime-CldRdSsv.js";
+import { t } from "./capabilities-CQ5IjhzL.js";
 //#region src/hooks/useIframeCapabilities.ts
 var n = e();
 function r() {

package/dist/{useLifecycle-B68iY077.js → useLifecycle-j7D9uD1o.js}

@@ -1,10 +1,10 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { g as t, h as n, r } from "./button-BtsM2UqM.js";
-import { t as i } from "./react-ofJbxM4x.js";
-import { t as a } from "./compiler-runtime-Cj8ZWiNS.js";
-import { h as o } from "./tooltip-CuNWg2ay.js";
-import { t as s } from "./jsx-runtime-DgDPJV9S.js";
-import { E as c, w as l } from "./useTheme-BwSgeAFb.js";
+import { g as t, h as n, r } from "./button-CvjkwdSk.js";
+import { t as i } from "./react-sHtZdjeP.js";
+import { t as a } from "./compiler-runtime-CldRdSsv.js";
+import { h as o } from "./tooltip-BO1REbqs.js";
+import { t as s } from "./jsx-runtime-3BD1kT0s.js";
+import { E as c, w as l } from "./useTheme-CRnjkku0.js";
 var u = o("calendar", [
 	["path", {
 		d: "M8 2v4",

package/dist/{useTheme-BwSgeAFb.js → useTheme-CRnjkku0.js}

@@ -1,8 +1,8 @@
 import { a as e, r as t } from "./rolldown-runtime-Cb76FRpK.js";
-import { a as n, g as r, s as i } from "./button-BtsM2UqM.js";
-import { t as a } from "./react-ofJbxM4x.js";
-import { t as o } from "./compiler-runtime-Cj8ZWiNS.js";
-import { C as s, F as c, L as l, M as u, O as d, P as f, S as p, j as m, v as h } from "./use-restore-focus-kmgwrL8q.js";
+import { a as n, g as r, s as i } from "./button-CvjkwdSk.js";
+import { t as a } from "./react-sHtZdjeP.js";
+import { t as o } from "./compiler-runtime-CldRdSsv.js";
+import { C as s, F as c, L as l, M as u, O as d, P as f, S as p, j as m, v as h } from "./use-restore-focus-BEM7sFWl.js";
 import { l as g, t as _ } from "./_baseMerge-BiGRwuqv.js";
 //#region ../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/mergeWith.js
 var v = g(function(e, t, n, r) {
@@ -64,7 +64,7 @@ function E(e, t) {
 	return e !== e && t !== t;
 }
 //#endregion
-//#region ../node_modules/.pnpm/jotai@2.20.3_@babel+core@7.29.0_@babel+template@7.28.6_@types+react@19.2.18_react@19.2.8/node_modules/jotai/esm/vanilla/internals.mjs
+//#region ../node_modules/.pnpm/jotai@2.20.3_@babel+core@7.29.0_@babel+template@7.28.6_@types+react@19.3.0_react@19.3.0/node_modules/jotai/esm/vanilla/internals.mjs
 var D = /* @__PURE__ */ t({
 	INTERNAL_addPendingPromiseToDependency: () => N,
 	INTERNAL_buildStoreRev3: () => we,
@@ -438,7 +438,7 @@ function we(...e) {
 	return t;
 }
 //#endregion
-//#region ../node_modules/.pnpm/jotai@2.20.3_@babel+core@7.29.0_@babel+template@7.28.6_@types+react@19.2.18_react@19.2.8/node_modules/jotai/esm/vanilla.mjs
+//#region ../node_modules/.pnpm/jotai@2.20.3_@babel+core@7.29.0_@babel+template@7.28.6_@types+react@19.3.0_react@19.3.0/node_modules/jotai/esm/vanilla.mjs
 var Te = 0;
 function R(e, t) {
 	let n = `atom${++Te}`, r = { toString() {
@@ -460,7 +460,7 @@ function ke() {
 	return Oe ||= z(), Oe;
 }
 //#endregion
-//#region ../node_modules/.pnpm/jotai@2.20.3_@babel+core@7.29.0_@babel+template@7.28.6_@types+react@19.2.18_react@19.2.8/node_modules/jotai/esm/react.mjs
+//#region ../node_modules/.pnpm/jotai@2.20.3_@babel+core@7.29.0_@babel+template@7.28.6_@types+react@19.3.0_react@19.3.0/node_modules/jotai/esm/react.mjs
 var B = (0, y.createContext)(void 0);
 function V(e) {
 	let t = (0, y.useContext)(B);

package/dist/{vega-component-C-bPttRN.js → vega-component-DG29TAB7.js}

@@ -1,23 +1,23 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { g as t, h as n, m as r, o as i } from "./button-BtsM2UqM.js";
-import { t as a } from "./react-ofJbxM4x.js";
-import { t as o } from "./compiler-runtime-Cj8ZWiNS.js";
-import { t as s } from "./tooltip-CuNWg2ay.js";
-import { T as c, c as l } from "./toDate-vEi5kTfY.js";
-import { t as u } from "./jsx-runtime-DgDPJV9S.js";
-import { n as d } from "./error-banner-D30nA9nE.js";
+import { g as t, h as n, m as r, o as i } from "./button-CvjkwdSk.js";
+import { t as a } from "./react-sHtZdjeP.js";
+import { t as o } from "./compiler-runtime-CldRdSsv.js";
+import { t as s } from "./tooltip-BO1REbqs.js";
+import { S as c, a as l } from "./toDate-BNJf01u1.js";
+import { t as u } from "./jsx-runtime-3BD1kT0s.js";
+import { n as d } from "./error-banner-Da600cwz.js";
 import { t as f } from "./debounce-C3jyATpc.js";
-import { A as p, n as ee } from "./useTheme-BwSgeAFb.js";
+import { A as p, n as ee } from "./useTheme-CRnjkku0.js";
 import { c as m } from "./arrays-CN1djC4k.js";
 import { t as te } from "./objects-CzUgoMIF.js";
-import { t as h } from "./useAsyncData-rkAlR_vh.js";
-import { a as ne, i as re, n as ie, t as g } from "./formats-DhhbdyAH.js";
+import { t as h } from "./useAsyncData-Deh5kszT.js";
+import { a as ne, i as re, n as ie, t as g } from "./formats-BGh2thRc.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-Cm-ATtou.js";
-import { t as le } from "./useDeepCompareMemoize-BlHFBj5_.js";
+import { t as se } from "./react-vega-BED0DjiB.js";
+import { a as ce, n as _ } from "./loader-BQOfjTIJ.js";
+import { t as le } from "./useDeepCompareMemoize-DXwzRINI.js";
 import { t as ue } from "./semaphore-89jsoHtS.js";
-import { t as de } from "./use-vega-container-remeasure-4DwJbPWu.js";
+import { t as de } from "./use-vega-container-remeasure-Bz4PZMtt.js";
 //#region src/plugins/impl/vega/fix-relative-url.ts
 var fe = /* @__PURE__ */ e(a(), 1), pe = o();
 function me(e) {

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

@@ -1,10 +1,10 @@
 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 { t } from "./react-sHtZdjeP.js";
+import { t as n } from "./compiler-runtime-CldRdSsv.js";
+import { t as r } from "./jsx-runtime-3BD1kT0s.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";
+import { n as a } from "./react-vega-BED0DjiB.js";
+import { t as o } from "./use-vega-container-remeasure-Bz4PZMtt.js";
 //#region src/components/charts/vega-embed-container.tsx
 var s = n(), c = /* @__PURE__ */ e(t(), 1), l = r();
 function u(e) {

package/dist/{vennDiagram-4TSXK5OY-d5g7XeiI.js → vennDiagram-4TSXK5OY-CF8pfaK3.js}

@@ -1,9 +1,9 @@
-import { i as e } from "./chunk-75Z2AOVW-AI7CvgKn.js";
+import { i as e } from "./chunk-75Z2AOVW-D7gxIs2Q.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-BSvuTkX4.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-BwiyaNpg.js";
 import { t as _ } from "./rough.esm-CtV9AnV1.js";
-import { p as v } from "./mermaid-BfhcnSj-.js";
+import { p as v } from "./mermaid-CiAXjLpA.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-BfX3bSzR.js → wardleyDiagram-VM6X3IG4-dGPu39d-.js}

@@ -1,8 +1,8 @@
-import { i as e } from "./chunk-75Z2AOVW-AI7CvgKn.js";
+import { i as e } from "./chunk-75Z2AOVW-D7gxIs2Q.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-BSvuTkX4.js";
-import { p as m } from "./mermaid-BfhcnSj-.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-BwiyaNpg.js";
+import { p as m } from "./mermaid-CiAXjLpA.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-C1QsLZg7.js → xychartDiagram-S5SC5T6Z-CP6-9q56.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-AI7CvgKn.js";
+import { i } from "./chunk-75Z2AOVW-D7gxIs2Q.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-BSvuTkX4.js";
-import "./chunk-PWAF6VOD-D8S9NPCy.js";
-import { t as b } from "./chunk-GMAD6QVW-wnHcn-lH.js";
-import { p as x } from "./mermaid-BfhcnSj-.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-BwiyaNpg.js";
+import "./chunk-PWAF6VOD-CQw5qATZ.js";
+import { t as b } from "./chunk-GMAD6QVW-BhaJx0X3.js";
+import { p as x } from "./mermaid-CiAXjLpA.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.2-dev99",
+  "version": "0.25.3-dev141",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -21,7 +21,7 @@
     "./unstable_internal/*": "./src/*"
   },
   "dependencies": {
-    "@ai-sdk/react": "^4.0.90",
+    "@ai-sdk/react": "^4.0.110",
     "@anywidget/types": "^0.4.0",
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/commands": "^6.11.1",
@@ -46,14 +46,14 @@
     "@glideapps/glide-data-grid": "6.0.4-alpha24",
     "@hookform/resolvers": "^5.9.1",
     "@img-comparison-slider/react": "^8.0.2",
-    "@internationalized/date": "^3.12.3",
+    "@internationalized/date": "^3.12.4",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
     "@lezer/lr": "^1.4.10",
     "@lezer/markdown": "^1.7.2",
     "@lezer/python": "^1.1.19",
-    "@marimo-team/codemirror-ai": "^0.3.9",
-    "@marimo-team/codemirror-languageserver": "^2.0.0",
+    "@marimo-team/codemirror-ai": "^0.3.10",
+    "@marimo-team/codemirror-languageserver": "^2.0.1",
     "@marimo-team/codemirror-mcp": "^0.1.7",
     "@marimo-team/codemirror-sql": "^0.3.0",
     "@marimo-team/llm-info": "workspace:*",
@@ -65,12 +65,12 @@
     "@radix-ui/react-icons": "~1.3.2",
     "@radix-ui/react-use-controllable-state": "~1.2.6",
     "@replit/codemirror-vim": "^6.4.0",
-    "@revealjs/react": "^0.2.1",
+    "@revealjs/react": "^0.2.2",
     "@streamdown/math": "^1.0.2",
     "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/typography": "^0.5.20",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.10",
+    "@tanstack/react-virtual": "^3.14.13",
     "@types/humanize-duration": "^3.27.4",
     "@types/js-cookie": "^3.0.6",
     "@types/jsdom": "^21.1.7",
@@ -89,7 +89,7 @@
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^5.5.0",
     "@zed-industries/agent-client-protocol": "^0.4.5",
-    "ai": "^7.0.87",
+    "ai": "^7.0.107",
     "ansi_up": "^6.0.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -103,15 +103,15 @@
     "htm": "^3.1.1",
     "html-react-parser": "^5.2.17",
     "html-to-image": "1.11.13",
-    "humanize-duration": "^3.34.1",
+    "humanize-duration": "^3.35.0",
     "iconify-icon": "^2.3.0",
     "jotai": "^2.20.3",
     "jotai-scope": "^0.12.2",
     "js-cookie": "^3.0.8",
-    "katex": "^0.18.5",
+    "katex": "^0.18.7",
     "lodash-es": "^4.18.1",
     "loro-codemirror": "^0.3.3",
-    "loro-crdt": "^1.15.1",
+    "loro-crdt": "^1.16.1",
     "lucide-react": "^0.577.0",
     "lz-string": "^1.5.0",
     "marked": "^15.0.12",
@@ -135,11 +135,11 @@
     "react-resizable-panels": "2.1.9",
     "react-use-event-hook": "^0.9.6",
     "react-vega": "^8.0.0",
-    "react-virtuoso": "^4.18.12",
+    "react-virtuoso": "^4.18.14",
     "reactflow": "^11.11.4",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "reveal.js": "^6.0.1",
+    "reveal.js": "^6.0.2",
     "rpc-anywhere": "^1.7.0",
     "sql-formatter": "^15.8.2",
     "streamdown": "^2.6.0",
@@ -159,7 +159,7 @@
     "vscode-jsonrpc": "^8.2.1",
     "vscode-languageserver-protocol": "^3.18.3",
     "web-vitals": "^4.2.4",
-    "zod": "^4.5.4"
+    "zod": "^4.6.5"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -200,10 +200,10 @@
     "@testing-library/react": "^16.3.3",
     "@types/dompurify": "^3.2.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.13.3",
+    "@types/node": "^24.13.6",
     "@types/plotly.js": "^2.35.16",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@types/timestring": "^6.0.5",
     "@vitejs/plugin-react": "^6.1.1",
     "@vitest/coverage-v8": "4.1.11",
@@ -216,9 +216,9 @@
     "oxfmt": "^0.68.0",
     "oxlint": "^1.83.0",
     "postcss": "^8.5.28",
-    "postcss-prefix-selector": "^2.2.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "postcss-prefix-selector": "^2.2.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "storybook": "^10.6.0",
     "stylelint": "^16.26.1",
     "stylelint-config-standard": "^36.0.1",
@@ -227,6 +227,6 @@
     "vite": "^8.3.0",
     "vite-plugin-wasm": "^3.6.0",
     "vitest": "^4.1.11",
-    "yaml": "^2.9.0"
+    "yaml": "^2.9.1"
   }
 }

package/src/components/data-table/__tests__/column_formatting.test.ts

@@ -50,6 +50,36 @@ describe("applyFormat", () => {
         }),
       ).toBe("10/1/23, 12:00:00 PM UTC");
     });
+
+    it("should treat naive datetime strings as UTC", () => {
+      const naive = "2023-10-01 23:30:00";
+      expect(
+        applyFormat(naive, { locale, format: "Date", dataType: "datetime" }),
+      ).toBe("10/1/23");
+      expect(
+        applyFormat(naive, {
+          locale,
+          format: "Datetime",
+          dataType: "datetime",
+        }),
+      ).toBe("10/1/23, 11:30:00 PM UTC");
+      expect(
+        applyFormat(naive, { locale, format: "Time", dataType: "datetime" }),
+      ).toBe("11:30:00 PM UTC");
+      expect(
+        applyFormat("2023-10-01T23:30:00.250", {
+          locale,
+          format: "Time",
+          dataType: "datetime",
+        }),
+      ).toBe("11:30:00 PM UTC");
+    });
+
+    it("should keep the calendar date for date-only strings", () => {
+      expect(
+        applyFormat("2023-10-01", { locale, format: "Date", dataType: "date" }),
+      ).toBe("10/1/23");
+    });
   });
 
   describe("number formatting", () => {

package/src/components/data-table/__tests__/columns.test.tsx

@@ -1268,6 +1268,76 @@ describe("renderCellValue with datetime values", () => {
       }).not.toThrow();
     });
   });
+
+  it("should render the column format for datetime strings", () => {
+    const mockColumn = {
+      ...createMockColumn(),
+      getColumnFormatting: () => "Date",
+      applyColumnFormatting: () => "FORMATTED",
+    } as unknown as Column<unknown>;
+
+    const selectCell = vi.fn();
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => "2024-06-14 12:34:20",
+      getValue: () => "2024-06-14 12:34:20",
+      selectCell,
+      cellStyles: "cell-styles",
+    });
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <TooltipProvider>{result}</TooltipProvider>
+      </I18nProvider>,
+    );
+    expect(container.textContent).toContain("FORMATTED");
+    expect(container.textContent).not.toContain("2024-06-14 12:34:20");
+
+    const wrapper = container.querySelector(".cell-styles");
+    expect(wrapper).not.toBeNull();
+    wrapper?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(selectCell).toHaveBeenCalledTimes(1);
+  });
+
+  it("should render the column format for Date instances", () => {
+    const mockColumn = {
+      ...createMockColumn(),
+      getColumnFormatting: () => "Date",
+      applyColumnFormatting: () => "FORMATTED",
+    } as unknown as Column<unknown>;
+    const value = new Date("2024-06-14T12:34:20Z");
+
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => value,
+      getValue: () => value,
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <TooltipProvider>{result}</TooltipProvider>
+      </I18nProvider>,
+    );
+    expect(container.textContent).toContain("FORMATTED");
+  });
+
+  it("should keep the raw string when no column format is set", () => {
+    const mockColumn = createMockColumn();
+
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => "2024-06-14",
+      getValue: () => "2024-06-14",
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <TooltipProvider>{result}</TooltipProvider>
+      </I18nProvider>,
+    );
+    expect(container.textContent).toContain("2024-06-14");
+  });
 });
 
 test("column_widths sets fixed size and meta.width", () => {

package/src/components/data-table/column-formatting/feature.ts

@@ -97,6 +97,7 @@ export const getFormatters = memoizeLastValue((locale: string) => {
 
   const dateFormatter = new Intl.DateTimeFormat(locale, {
     dateStyle: "short", // 3/4/2024
+    timeZone: "UTC",
   });
 
   const dateTimeFormatter = new Intl.DateTimeFormat(locale, {
@@ -123,6 +124,24 @@ export const getFormatters = memoizeLastValue((locale: string) => {
   };
 });
 
+const TIMEZONE_SUFFIX = /(?:Z|[+-]\d{2}:?\d{2})$/i;
+
+/**
+ * The date formatters render in UTC. A naive datetime string carries no
+ * offset, and `new Date` would read it as local time, so pin it to UTC
+ * to keep the wall-clock fields the backend sent.
+ */
+function parseDateAsUTC(value: unknown): Date {
+  if (typeof value !== "string") {
+    return new Date(value as number | Date);
+  }
+  const trimmed = value.trim();
+  if (TIMEZONE_SUFFIX.test(trimmed) || !trimmed.includes(":")) {
+    return new Date(trimmed);
+  }
+  return new Date(`${trimmed.replace(" ", "T")}Z`);
+}
+
 // Apply formatting to a value given a format and data type
 export const applyFormat = (
   value: unknown,
@@ -152,7 +171,7 @@ export const applyFormat = (
       return value;
     case "datetime":
     case "date": {
-      const date = new Date(value as string);
+      const date = parseDateAsUTC(value);
       switch (format) {
         case "Date":
           return dateFormatter.format(date);

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

@@ -6,14 +6,14 @@ 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 { isValid } from "date-fns";
 import { useRef } from "react";
 import { useLocale, useNumberFormatter } from "react-aria";
 import { WithLocale } from "@/core/i18n/with-locale";
 import type { DataType } from "@/core/kernel/messages";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
-import { type DateFormat, exactDateTime, getDateFormat } from "@/utils/dates";
+import { exactDateTime } from "@/utils/dates";
 import { Events } from "@/utils/events";
 import { Logger } from "@/utils/Logger";
 import { Maps } from "@/utils/maps";
@@ -583,21 +583,19 @@ function renderDate({
   value,
   dataType,
   dtype,
-  format,
+  displayValue,
   locale,
 }: {
   value: Date;
   dataType?: DataType;
   dtype?: string;
-  format?: DateFormat | null;
+  displayValue?: string;
   locale: string;
 }): React.ReactNode {
   const type = dataType === "date" ? "date" : "datetime";
   const timezone = extractTimezone(dtype);
 
-  const exactValue = format
-    ? formatDate(value, format)
-    : exactDateTime(value, timezone, locale);
+  const exactValue = displayValue ?? exactDateTime(value, timezone, locale);
 
   return (
     <DatePopover date={value} type={type}>
@@ -640,7 +638,8 @@ export function renderCellValue<TData, TValue>({
 
   if (dataType === "datetime" && typeof value === "string") {
     try {
-      if (!isValid(value)) {
+      const date = new Date(value);
+      if (!format || !isValid(date)) {
         return (
           <div onClick={selectCell} className={cellStyles}>
             {value}
@@ -648,14 +647,15 @@ export function renderCellValue<TData, TValue>({
         );
       }
 
-      const date = new Date(value);
-      const format = getDateFormat(value);
+      const displayValue = String(column.applyColumnFormatting(value));
       return (
-        <WithLocale>
-          {(locale) =>
-            renderDate({ value: date, dataType, dtype, format, locale })
-          }
-        </WithLocale>
+        <div onClick={selectCell} className={cellStyles}>
+          <WithLocale>
+            {(locale) =>
+              renderDate({ value: date, dataType, dtype, displayValue, locale })
+            }
+          </WithLocale>
+        </div>
       );
     } catch (error) {
       Logger.error("Error parsing datetime, fallback to string", error);
@@ -672,10 +672,17 @@ export function renderCellValue<TData, TValue>({
     }
 
     // e.g. 2010-10-07 17:15:00
+    const displayValue = format
+      ? String(column.applyColumnFormatting(value))
+      : undefined;
     return (
-      <WithLocale>
-        {(locale) => renderDate({ value, dataType, dtype, locale })}
-      </WithLocale>
+      <div onClick={selectCell} className={cellStyles}>
+        <WithLocale>
+          {(locale) =>
+            renderDate({ value, dataType, dtype, displayValue, locale })
+          }
+        </WithLocale>
+      </div>
     );
   }
 

package/src/components/editor/controls/__tests__/notebook-menu-dropdown.test.tsx

@@ -10,6 +10,7 @@ import {
 import { Provider } from "jotai";
 import type React from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { requestId } from "@/__tests__/branded";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { ModalProvider } from "@/components/modal/ImperativeModal";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -129,7 +130,7 @@ describe("NotebookMenuDropdown", () => {
     }));
     invalidateDataSourceDiscovery();
     vi.spyOn(DiscoverDataSources, "request").mockResolvedValue({
-      request_id: "request-id",
+      request_id: requestId("request-id"),
       sources: [],
     });
   });
@@ -142,7 +143,7 @@ describe("NotebookMenuDropdown", () => {
 
   it("shows detected databases in the add connection submenu", async () => {
     vi.mocked(DiscoverDataSources.request).mockResolvedValue({
-      request_id: "request-id",
+      request_id: requestId("request-id"),
       sources: [POSTGRES_SOURCE],
     });
 
@@ -172,7 +173,7 @@ describe("NotebookMenuDropdown", () => {
 
   it("shows detected storage in the add remote storage submenu", async () => {
     vi.mocked(DiscoverDataSources.request).mockResolvedValue({
-      request_id: "request-id",
+      request_id: requestId("request-id"),
       sources: [S3_SOURCE],
     });