@marimo-team/islands 0.25.2-dev5 → 0.25.2-dev51

package/dist/{useAsyncData-BD7NLQ3_.js → useAsyncData-rkAlR_vh.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-BOw801nZ.js";
+import { A as r } from "./useTheme-BwSgeAFb.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-D8XWr8lL.js → useDateFormatter-BTtPAD2R.js}

@@ -1,7 +1,7 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-ofJbxM4x.js";
-import { g as n } from "./tooltip-Bi36DgYh.js";
-import { i as r } from "./label-MNhNNoN6.js";
+import { h as n } from "./tooltip-CuNWg2ay.js";
+import { i as r } from "./label-DPWAFACU.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"

package/dist/{useDeepCompareMemoize-CawMGSRU.js → useDeepCompareMemoize-BlHFBj5_.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-BOw801nZ.js";
+import { k as n } from "./useTheme-BwSgeAFb.js";
 //#region src/hooks/useDeepCompareMemoize.ts
 var r = /* @__PURE__ */ e(t(), 1);
 function i(e) {

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

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

package/dist/{useLifecycle-3vGhRa1o.js → useLifecycle-B68iY077.js}

@@ -1,10 +1,10 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { g as t, h as n, r } from "./button-B0Xgl-Qn.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 { g as o } from "./tooltip-Bi36DgYh.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-BOw801nZ.js";
+import { E as c, w as l } from "./useTheme-BwSgeAFb.js";
 var u = o("calendar", [
 	["path", {
 		d: "M8 2v4",

package/dist/{useTheme-BOw801nZ.js → useTheme-BwSgeAFb.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-B0Xgl-Qn.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-ZgG5Br63.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 { 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) {

package/dist/{vb-Dpc8vhvF.js → vb-RK1eDXRl.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./rolldown-runtime-Cb76FRpK.js";
-//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.3/node_modules/@codemirror/legacy-modes/mode/vb.js
+//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.4/node_modules/@codemirror/legacy-modes/mode/vb.js
 var t = /* @__PURE__ */ e({ vb: () => j }), n = "error";
 function r(e) {
 	return RegExp("^((" + e.join(")|(") + "))\\b", "i");

package/dist/{vbscript-B-Y1XnZe.js → vbscript-BCOeM0de.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./rolldown-runtime-Cb76FRpK.js";
-//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.3/node_modules/@codemirror/legacy-modes/mode/vbscript.js
+//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.4/node_modules/@codemirror/legacy-modes/mode/vbscript.js
 var t = /* @__PURE__ */ e({ vbScript: () => r });
 function n(e) {
 	var t = "error";

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

@@ -1,21 +1,21 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { g as t, h as n, m as r, o as i } from "./button-B0Xgl-Qn.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-Bi36DgYh.js";
-import { T as c, c as l } from "./toDate-DWVp6uE1.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-DzAmP0AQ.js";
+import { n as d } from "./error-banner-D30nA9nE.js";
 import { t as f } from "./debounce-C3jyATpc.js";
-import { A as p, n as ee } from "./useTheme-BOw801nZ.js";
+import { A as p, n as ee } from "./useTheme-BwSgeAFb.js";
 import { c as m } from "./arrays-CN1djC4k.js";
 import { t as te } from "./objects-CzUgoMIF.js";
-import { t as h } from "./useAsyncData-BD7NLQ3_.js";
-import { a as ne, i as re, n as ie, t as g } from "./formats-Q9gwlLyD.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 { 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-C9OUkMrj.js";
-import { t as le } from "./useDeepCompareMemoize-CawMGSRU.js";
+import { a as ce, n as _ } from "./loader-Cm-ATtou.js";
+import { t as le } from "./useDeepCompareMemoize-BlHFBj5_.js";
 import { t as ue } from "./semaphore-89jsoHtS.js";
 import { t as de } from "./use-vega-container-remeasure-4DwJbPWu.js";
 //#region src/plugins/impl/vega/fix-relative-url.ts

package/dist/{velocity-DHMu9kc-.js → velocity-CZKOFbOI.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./rolldown-runtime-Cb76FRpK.js";
-//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.3/node_modules/@codemirror/legacy-modes/mode/velocity.js
+//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.4/node_modules/@codemirror/legacy-modes/mode/velocity.js
 var t = /* @__PURE__ */ e({ velocity: () => f });
 function n(e) {
 	for (var t = {}, n = e.split(" "), r = 0; r < n.length; ++r) t[n[r]] = !0;

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

@@ -1,9 +1,9 @@
-import { i as e } from "./chunk-75Z2AOVW-C4AOleKf.js";
+import { i as e } from "./chunk-75Z2AOVW-AI7CvgKn.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-1TwWR6gh.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 { t as _ } from "./rough.esm-CtV9AnV1.js";
-import { p as v } from "./mermaid-Dfvntf3s.js";
+import { p as v } from "./mermaid-BfhcnSj-.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/{verilog-DhiEaoUl.js → verilog-DqQTzVn8.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./rolldown-runtime-Cb76FRpK.js";
-//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.3/node_modules/@codemirror/legacy-modes/mode/verilog.js
+//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.4/node_modules/@codemirror/legacy-modes/mode/verilog.js
 var t = /* @__PURE__ */ e({ verilog: () => r });
 function n(e) {
 	var t = e.statementIndentUnit, n = e.dontAlignCalls, r = e.noIndentKeywords || [], i = e.multiLineStrings, a = e.hooks || {};

package/dist/{vhdl-D4X23YKO.js → vhdl-vQr2bfmi.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./rolldown-runtime-Cb76FRpK.js";
-//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.3/node_modules/@codemirror/legacy-modes/mode/vhdl.js
+//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.4/node_modules/@codemirror/legacy-modes/mode/vhdl.js
 var t = /* @__PURE__ */ e({ vhdl: () => g });
 function n(e) {
 	for (var t = {}, n = e.split(","), r = 0; r < n.length; ++r) {

package/dist/{wardleyDiagram-VM6X3IG4-DYC1AFni.js → wardleyDiagram-VM6X3IG4-BfX3bSzR.js}

@@ -1,8 +1,8 @@
-import { i as e } from "./chunk-75Z2AOVW-C4AOleKf.js";
+import { i as e } from "./chunk-75Z2AOVW-AI7CvgKn.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-1TwWR6gh.js";
-import { p as m } from "./mermaid-Dfvntf3s.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 { 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/{webidl-SyzNxWpJ.js → webidl-DzX7N40e.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./rolldown-runtime-Cb76FRpK.js";
-//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.3/node_modules/@codemirror/legacy-modes/mode/webidl.js
+//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.4/node_modules/@codemirror/legacy-modes/mode/webidl.js
 var t = /* @__PURE__ */ e({ webIDL: () => C });
 function n(e) {
 	return RegExp("^((" + e.join(")|(") + "))\\b");

package/dist/{xquery-BC2R4Hk6.js → xquery-Cw_Q_hGR.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./rolldown-runtime-Cb76FRpK.js";
-//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.3/node_modules/@codemirror/legacy-modes/mode/xquery.js
+//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.4/node_modules/@codemirror/legacy-modes/mode/xquery.js
 var t = /* @__PURE__ */ e({ xQuery: () => x }), n = function() {
 	function e(e) {
 		return {

package/dist/{xychartDiagram-S5SC5T6Z-Df8LLnuY.js → xychartDiagram-S5SC5T6Z-C1QsLZg7.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-C4AOleKf.js";
+import { i } from "./chunk-75Z2AOVW-AI7CvgKn.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-1TwWR6gh.js";
-import "./chunk-PWAF6VOD-lNxB9k8z.js";
-import { t as b } from "./chunk-GMAD6QVW-vStrMz2P.js";
-import { p as x } from "./mermaid-Dfvntf3s.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";
 //#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/dist/{yacas-DLNXPMmH.js → yacas-DiC4jJBE.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./rolldown-runtime-Cb76FRpK.js";
-//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.3/node_modules/@codemirror/legacy-modes/mode/yacas.js
+//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.4/node_modules/@codemirror/legacy-modes/mode/yacas.js
 var t = /* @__PURE__ */ e({ yacas: () => m });
 function n(e) {
 	for (var t = {}, n = e.split(" "), r = 0; r < n.length; ++r) t[n[r]] = !0;

package/dist/{z80-CDXWHOO6.js → z80-CUOQDEJO.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./rolldown-runtime-Cb76FRpK.js";
-//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.3/node_modules/@codemirror/legacy-modes/mode/z80.js
+//#region ../node_modules/.pnpm/@codemirror+legacy-modes@6.5.4/node_modules/@codemirror/legacy-modes/mode/z80.js
 var t = /* @__PURE__ */ e({ z80: () => r });
 function n(e) {
 	var t, n;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.2-dev5",
+  "version": "0.25.2-dev51",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -24,19 +24,19 @@
     "@ai-sdk/react": "^4.0.90",
     "@anywidget/types": "^0.4.0",
     "@codemirror/autocomplete": "^6.20.3",
-    "@codemirror/commands": "^6.11.0",
+    "@codemirror/commands": "^6.11.1",
     "@codemirror/lang-markdown": "^6.5.2",
     "@codemirror/lang-python": "^6.2.1",
     "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/language": "^6.12.4",
     "@codemirror/language-data": "^6.5.2",
-    "@codemirror/legacy-modes": "^6.5.3",
+    "@codemirror/legacy-modes": "^6.5.4",
     "@codemirror/lint": "^6.9.7",
     "@codemirror/merge": "^6.12.2",
-    "@codemirror/search": "^6.7.1",
-    "@codemirror/state": "^6.7.1",
+    "@codemirror/search": "^6.7.2",
+    "@codemirror/state": "^6.7.6",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.9",
+    "@codemirror/view": "^6.43.13",
     "@dagrejs/dagre": "^1.1.8",
     "@date-fns/tz": "^1.5.0",
     "@dnd-kit/core": "^6.3.1",
@@ -63,7 +63,7 @@
     "@paralleldrive/cuid2": "^2.3.1",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "~1.3.2",
-    "@radix-ui/react-use-controllable-state": "~1.2.2",
+    "@radix-ui/react-use-controllable-state": "~1.2.6",
     "@replit/codemirror-vim": "^6.4.0",
     "@revealjs/react": "^0.2.1",
     "@streamdown/math": "^1.0.2",
@@ -99,7 +99,7 @@
     "date-fns": "^4.4.0",
     "dequal": "^2.0.3",
     "dnd-core": "^16.0.1",
-    "dompurify": "^3.4.14",
+    "dompurify": "^3.4.16",
     "htm": "^3.1.1",
     "html-react-parser": "^5.2.17",
     "html-to-image": "1.11.13",
@@ -120,7 +120,7 @@
     "path-to-regexp": "^8.4.2",
     "plotly.js": "^3.7.0",
     "pyodide": "314.0.0",
-    "radix-ui": "1.4.3",
+    "radix-ui": "1.6.7",
     "react-arborist": "^3.16.0",
     "react-aria": "3.47.0",
     "react-aria-components": "1.16.0",
@@ -191,12 +191,12 @@
   "devDependencies": {
     "@codecov/vite-plugin": "^1.9.1",
     "@csstools/postcss-light-dark-function": "^2.0.11",
-    "@playwright/test": "^1.62.1",
+    "@playwright/test": "^1.63.0",
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/addon-links": "^10.6.0",
     "@storybook/react-vite": "^10.6.0",
     "@testing-library/jest-dom": "^7.0.1",
-    "@testing-library/react": "^16.3.2",
+    "@testing-library/react": "^16.3.3",
     "@types/dompurify": "^3.2.0",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.13.3",
@@ -204,7 +204,7 @@
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.5",
     "@types/timestring": "^6.0.5",
-    "@vitejs/plugin-react": "^6.1.0",
+    "@vitejs/plugin-react": "^6.1.1",
     "@vitest/coverage-v8": "4.1.11",
     "blob-polyfill": "^7.0.20220408",
     "cross-env": "^7.0.3",
@@ -214,7 +214,7 @@
     "oxc-transform-react": "0.145.0",
     "oxfmt": "^0.68.0",
     "oxlint": "^1.83.0",
-    "postcss": "^8.5.26",
+    "postcss": "^8.5.28",
     "postcss-prefix-selector": "^2.2.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
@@ -223,7 +223,7 @@
     "stylelint-config-standard": "^36.0.1",
     "tailwindcss": "^4.3.3",
     "vega-typings": "^2.3.0",
-    "vite": "^8.2.2",
+    "vite": "^8.3.0",
     "vite-plugin-wasm": "^3.6.0",
     "vitest": "^4.1.11",
     "yaml": "^2.9.0"

package/src/components/chat/tool-call/__tests__/tool-result.test.tsx

@@ -0,0 +1,56 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { ResultRenderer } from "../tool-result";
+
+afterEach(cleanup);
+
+describe("ResultRenderer", () => {
+  it.each([
+    { status: "success", message: "No output was returned." },
+    { status: "success", next_steps: ["Run the edited cells."] },
+    {
+      status: "success",
+      action_url: null,
+      next_steps: null,
+      meta: null,
+      message: "Finished",
+    },
+    {
+      status: "success",
+      action_url: "/notebook",
+      next_steps: ["Review the output."],
+      meta: { source: "notebook" },
+      cellsToOutput: { cell: { cellOutput: "Hello", consoleOutput: "" } },
+    },
+  ])("renders structured results with optional fields: %j", (result) => {
+    render(<ResultRenderer result={result} />);
+
+    expect(screen.getByRole("heading", { name: "Tool Result" })).toBeVisible();
+    expect(screen.getByText("success")).toBeVisible();
+  });
+
+  it("displays messages and tool-specific output without metadata", () => {
+    render(
+      <ResultRenderer
+        result={{
+          status: "success",
+          message: "Cells finished running.",
+          cellsToOutput: { cell: { cellOutput: "Hello", consoleOutput: "" } },
+        }}
+      />,
+    );
+
+    expect(screen.getByText("Cells finished running.")).toBeVisible();
+    expect(screen.getByText("cellsToOutput")).toBeVisible();
+    expect(screen.getByText(/"cellOutput": "Hello"/)).toBeVisible();
+  });
+
+  it("preserves the fallback for unstructured results", () => {
+    render(<ResultRenderer result="Plain text result" />);
+
+    expect(screen.queryByRole("heading", { name: "Tool Result" })).toBeNull();
+    expect(screen.getByText("Plain text result")).toBeVisible();
+  });
+});

package/src/components/chat/tool-call/tool-result.tsx

@@ -21,9 +21,9 @@ function isUninformative(value: unknown): boolean {
 const SuccessResultSchema = z.looseObject({
   status: z.string().default("success"),
   auth_required: z.boolean().default(false),
-  action_url: z.any(),
-  next_steps: z.any(),
-  meta: z.any(),
+  action_url: z.any().optional(),
+  next_steps: z.any().optional(),
+  meta: z.any().optional(),
   message: z.string().nullish(),
 });
 

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

@@ -1,7 +1,91 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { expect, test } from "vitest";
-import { matchingPageRanges } from "../pagination";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { DataTablePagination, matchingPageRanges } from "../pagination";
+
+function PaginationHarness({
+  totalPages = 3,
+  loading = false,
+}: {
+  totalPages?: number;
+  loading?: boolean;
+}) {
+  const table = useReactTable({
+    locale: "en-US",
+    data: [],
+    columns: [],
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: totalPages,
+  });
+  return (
+    <TooltipProvider>
+      <DataTablePagination table={table} tableLoading={loading} />
+    </TooltipProvider>
+  );
+}
+
+test("named navigation controls preserve page updates and boundaries", () => {
+  render(<PaginationHarness />);
+  expect(screen.getByRole("button", { name: "First page" })).toBeDisabled();
+  expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
+  fireEvent.click(screen.getByRole("button", { name: "Next page" }));
+  expect(
+    screen.getByRole("button", { name: "Choose page, current page 2 of 3" }),
+  ).toBeEnabled();
+  fireEvent.click(screen.getByRole("button", { name: "Last page" }));
+  expect(screen.getByRole("button", { name: "Next page" })).toBeDisabled();
+  expect(screen.getByRole("button", { name: "Last page" })).toBeDisabled();
+  fireEvent.click(screen.getByRole("button", { name: "Previous page" }));
+  fireEvent.click(screen.getByRole("button", { name: "First page" }));
+  expect(
+    screen.getByRole("button", { name: "Choose page, current page 1 of 3" }),
+  ).toBeEnabled();
+  expect(screen.getByRole("button", { name: "First page" })).toBeDisabled();
+  expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
+  expect(screen.getByRole("button", { name: "Next page" })).toBeEnabled();
+  expect(screen.getByRole("button", { name: "Last page" })).toBeEnabled();
+});
+
+test("loading prevents navigation and a single page disables controls", () => {
+  const { rerender } = render(<PaginationHarness loading={true} />);
+  fireEvent.click(screen.getByRole("button", { name: "Next page" }));
+  fireEvent.click(screen.getByRole("button", { name: "Last page" }));
+  expect(
+    screen.getByRole("button", { name: "Choose page, current page 1 of 3" }),
+  ).toBeEnabled();
+  rerender(<PaginationHarness />);
+  fireEvent.click(screen.getByRole("button", { name: "Next page" }));
+  expect(
+    screen.getByRole("button", { name: "Choose page, current page 2 of 3" }),
+  ).toBeEnabled();
+  rerender(<PaginationHarness key="single-page" totalPages={1} />);
+  for (const name of [
+    "First page",
+    "Previous page",
+    "Next page",
+    "Last page",
+    "Choose page, current page 1 of 1",
+  ]) {
+    expect(screen.getByRole("button", { name })).toBeDisabled();
+  }
+});
+
+test("page picker exposes named dialog and search", () => {
+  render(<PaginationHarness />);
+  fireEvent.click(
+    screen.getByRole("button", { name: "Choose page, current page 1 of 3" }),
+  );
+  expect(
+    screen.getByRole("dialog", { name: "Choose page" }),
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole("combobox", { name: "Search pages" }),
+  ).toBeInTheDocument();
+});
 
 test("empty prefix returns no ranges", () => {
   expect(matchingPageRanges("", 500)).toEqual([]);

package/src/components/data-table/charts/__tests__/schemas.test.ts

@@ -4,6 +4,31 @@ import { describe, expect, it } from "vitest";
 import { ChartSchema } from "../schemas";
 
 describe("ChartSchema", () => {
+  it.each(["hours", "yearmonthdatehours"] as const)(
+    "preserves the %s time unit in saved chart configurations",
+    (timeUnit) => {
+      const column = {
+        field: "timestamp",
+        selectedDataType: "temporal",
+        sort: "ascending",
+        timeUnit,
+      };
+      const config = {
+        general: {
+          xColumn: { ...column, aggregate: "none" },
+          yColumn: { ...column, aggregate: "none" },
+          facet: {
+            row: { ...column, linkYAxis: true, binned: true, maxbins: 6 },
+            column: { ...column, linkXAxis: true, binned: true, maxbins: 6 },
+          },
+        },
+        tooltips: { auto: true, fields: [] },
+      };
+
+      expect(ChartSchema.parse(config)).toEqual(config);
+    },
+  );
+
   it("keeps a known axis column type", () => {
     const result = ChartSchema.parse({
       general: { xColumn: { field: "count", type: "integer" } },

package/src/components/data-table/charts/__tests__/spec.test.ts

@@ -69,30 +69,33 @@ describe("getAxisEncoding", () => {
     });
   });
 
-  it("should return correct encoding for temporal field with timeUnit", () => {
-    const result = getAxisEncoding(
-      {
-        field: "date",
-        selectedDataType: "temporal",
-        aggregate: NONE_VALUE,
-        timeUnit: "yearmonth",
-      },
-      undefined,
-      "Date",
-      undefined,
-      ChartType.LINE,
-    );
+  it.each(["yearmonth", "hours", "yearmonthdatehours"] as const)(
+    "should preserve the %s time unit in temporal axis encodings",
+    (timeUnit) => {
+      const result = getAxisEncoding(
+        {
+          field: "date",
+          selectedDataType: "temporal",
+          aggregate: NONE_VALUE,
+          timeUnit,
+        },
+        undefined,
+        "Date",
+        undefined,
+        ChartType.LINE,
+      );
 
-    expect(result).toEqual({
-      field: "date",
-      type: "temporal",
-      bin: undefined,
-      title: "Date",
-      stack: undefined,
-      aggregate: undefined,
-      timeUnit: "yearmonth",
-    });
-  });
+      expect(result).toEqual({
+        field: "date",
+        type: "temporal",
+        bin: undefined,
+        title: "Date",
+        stack: undefined,
+        aggregate: undefined,
+        timeUnit,
+      });
+    },
+  );
 
   it("should return correct encoding for categorical field", () => {
     const result = getAxisEncoding(

package/src/components/data-table/charts/constants.ts

@@ -147,17 +147,18 @@ export const TIME_UNIT_DESCRIPTIONS: Record<
   [title: string, description: string]
 > = {
   year: ["Year", "2025"],
-  quarter: ["Quarter", "Q1 2025"],
-  month: ["Month", "Jan 2025"],
-  week: ["Week", "Jan 01, 2025"],
-  day: ["Day", "Jan 01, 2025"],
-  hours: ["Hour", "Jan 01, 2025 12:00"],
-  minutes: ["Minute", "Jan 01, 2025 12:34"],
-  seconds: ["Second", "Jan 01, 2025 12:34:56"],
-  milliseconds: ["Millisecond", "Jan 01, 2025 12:34:56.789"],
-  date: ["Date", "Jan 01, 2025"],
-  dayofyear: ["Day of Year", "Day 1 of 2025"],
+  quarter: ["Quarter of year", "Q1"],
+  month: ["Month of year", "Jan"],
+  week: ["Week of year", "Week 1"],
+  day: ["Day of week", "Sunday"],
+  hours: ["Hour of day", "12:00"],
+  minutes: ["Minute of hour", "34"],
+  seconds: ["Second of minute", "56"],
+  milliseconds: ["Millisecond of second", "789"],
+  date: ["Day of month", "1"],
+  dayofyear: ["Day of year", "Day 1"],
   yearmonth: ["Year Month", "Jan 2025"],
   yearmonthdate: ["Year Month Date", "Jan 01, 2025"],
+  yearmonthdatehours: ["Year Month Date Hours", "Jan 01, 2025 12:00"],
   monthdate: ["Month Date", "Jan 01"],
 };

package/src/components/data-table/charts/types.ts

@@ -40,6 +40,7 @@ export const SINGLE_TIME_UNITS = [
 export const COMBINED_TIME_UNITS = [
   "yearmonth",
   "yearmonthdate",
+  "yearmonthdatehours",
   "monthdate",
 ] as const;
 export const TIME_UNITS = [