@marimo-team/islands 0.21.2-dev99 → 0.22.1-dev10

package/dist/stylus-DvSovJEP.js

@@ -0,0 +1,4 @@
+import { t as stylus } from "./stylus-jhpzcQ6Y.js";
+export {
+  stylus
+};

package/dist/swift-D-_E7Yyb.js

@@ -0,0 +1,4 @@
+import { t as swift } from "./swift-BrO8qThZ.js";
+export {
+  swift
+};

package/dist/tcl-Di5sAVHN.js

@@ -0,0 +1,4 @@
+import { t as tcl } from "./tcl-s5QI5gv3.js";
+export {
+  tcl
+};

package/dist/textile-Benwt66z.js

@@ -0,0 +1,4 @@
+import { t as textile } from "./textile-ClhvJrxM.js";
+export {
+  textile
+};

package/dist/{time-B8tcX_hU.js → time-Bdnxi22U.js}

@@ -1,7 +1,7 @@
-import { a as tickStep, s as bisector } from "./precisionRound-Duzbr5ur.js";
-import { a as copy, i as continuous } from "./linear-CJ6ctpF3.js";
-import { A as durationSecond, C as timeMinute, D as durationHour, E as durationDay, M as durationYear, N as millisecond, O as durationMinute, S as utcHour, T as second, _ as utcSunday, c as timeMonth, j as durationWeek, k as durationMonth, l as utcMonth, o as timeYear, p as timeSunday, s as utcYear, t as timeFormat, v as timeDay, w as utcMinute, x as timeHour, y as unixDay } from "./defaultLocale-B_A76Zpk.js";
-import { n as initRange } from "./init-BfRhston.js";
+import { a as tickStep, s as bisector } from "./precisionRound-CGLoV26P.js";
+import { a as copy, i as continuous } from "./linear-v57w-fIs.js";
+import { A as durationSecond, C as timeMinute, D as durationHour, E as durationDay, M as durationYear, N as millisecond, O as durationMinute, S as utcHour, T as second, _ as utcSunday, c as timeMonth, j as durationWeek, k as durationMonth, l as utcMonth, o as timeYear, p as timeSunday, s as utcYear, t as timeFormat, v as timeDay, w as utcMinute, x as timeHour, y as unixDay } from "./defaultLocale-Bxoo2-30.js";
+import { n as initRange } from "./init-Cge3yl4r.js";
 function max(e, g) {
   let _;
   if (g === void 0) for (let g2 of e) g2 != null && (_ < g2 || _ === void 0 && g2 >= g2) && (_ = g2);

package/dist/{timeline-definition-IT6M3QCI-C7yv4fEk.js → timeline-definition-IT6M3QCI-DNoLAh-i.js}

@@ -1,7 +1,7 @@
-import "./purify.es-BwXbuO3r.js";
-import { t as arc_default } from "./arc-CEWBr4jc.js";
-import { i as log, n as __export, r as __name, t as select_default } from "./src-szye8OCw.js";
-import { G as setupGraphViewbox, Q as is_dark_default, X as darken_default, Z as lighten_default, a as clear, b as getConfig2, o as commonDb_exports } from "./chunk-ABZYJK2D-DYZpeLRO.js";
+import "./purify.es-ukiMXY-F.js";
+import { t as arc_default } from "./arc-DLJpPF9M.js";
+import { i as log, n as __export, r as __name, t as select_default } from "./src-DbP20yFZ.js";
+import { G as setupGraphViewbox, Q as is_dark_default, X as darken_default, Z as lighten_default, a as clear, b as getConfig2, o as commonDb_exports } from "./chunk-ABZYJK2D-D5YIs71w.js";
 var parser = (function() {
   var t = /* @__PURE__ */ __name(function(t2, S2, C2, w) {
     for (C2 || (C2 = {}), w = t2.length; w--; C2[t2[w]] = S2) ;

package/dist/{toDate-BWaG12Pv.js → toDate-D6VXexnV.js}

@@ -5,8 +5,8 @@ import { t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
 import { l as createLucideIcon } from "./dist-D2Rk1j4R.js";
 import { h as Logger } from "./button-qsiIHncQ.js";
-import { r as KnownQueryParams } from "./constants-CXiS0vdr.js";
-import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-BIAKDAh6.js";
+import { r as KnownQueryParams } from "./constants-D1Am36hX.js";
+import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-Dm1WaAGy.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {
     cx: "12",

package/dist/toml-CeOvPOkY.js

@@ -0,0 +1,4 @@
+import { t as toml } from "./toml-TFa3EJQE.js";
+export {
+  toml
+};

package/dist/{treemap-GDKQZRPO-B_LAAEIM.js → treemap-GDKQZRPO-C5OoxpmV.js}

@@ -1,6 +1,6 @@
-import "./chunk-TCCFYFTB-BrhaBdR8.js";
-import "./main-C01_ic0d.js";
-import { n as createTreemapServices, t as TreemapModule } from "./chunk-B2363JML-CkfqLBeZ.js";
+import "./chunk-TCCFYFTB-BAhzIqBO.js";
+import "./main-CvkAPtaq.js";
+import { n as createTreemapServices, t as TreemapModule } from "./chunk-B2363JML-BzZqINRO.js";
 export {
   createTreemapServices
 };

package/dist/troff-DJN9hfgu.js

@@ -0,0 +1,4 @@
+import { t as troff } from "./troff-SqLg0heF.js";
+export {
+  troff
+};

package/dist/ttcn-DQW2Psjf.js

@@ -0,0 +1,4 @@
+import { t as ttcn } from "./ttcn-Cfrap7HJ.js";
+export {
+  ttcn
+};

package/dist/ttcn-cfg-zFG_MNpg.js

@@ -0,0 +1,4 @@
+import { t as ttcnCfg } from "./ttcn-cfg-Dopc-iwE.js";
+export {
+  ttcnCfg
+};

package/dist/turtle-DHRyNlSc.js

@@ -0,0 +1,4 @@
+import { t as turtle } from "./turtle-Dt52DvVH.js";
+export {
+  turtle
+};

package/dist/{types-Dqw69fPc.js → types-CQ-RbYxp.js}

@@ -4,7 +4,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
 import { l as createLucideIcon } from "./dist-D2Rk1j4R.js";
 import { t as Button } from "./button-qsiIHncQ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { n as Constants } from "./constants-CXiS0vdr.js";
+import { n as Constants } from "./constants-D1Am36hX.js";
 var Pencil = createLucideIcon("pencil", [["path", {
   d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
   key: "1a8usu"

package/dist/{useAsyncData-Dqt2tV1E.js → useAsyncData-Cd4Urlww.js}

@@ -1,8 +1,8 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { w as useEvent_default } from "./useTheme-BIAKDAh6.js";
-import { t as invariant } from "./invariant-CzjtdzpE.js";
+import { w as useEvent_default } from "./useTheme-Dm1WaAGy.js";
+import { t as invariant } from "./invariant-D4hPsZFI.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {
     return {

package/dist/{useDeepCompareMemoize-D2PKDkrk.js → useDeepCompareMemoize-DOzKCTzc.js}

@@ -1,11 +1,11 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { t as toDate } from "./toDate-BWaG12Pv.js";
+import { t as toDate } from "./toDate-D6VXexnV.js";
 import { a as cva, v as cn } from "./button-qsiIHncQ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { C as dequal } from "./useTheme-BIAKDAh6.js";
-import { i as tableFromIPC } from "./loader-DrMJeyDu.js";
+import { C as dequal } from "./useTheme-Dm1WaAGy.js";
+import { i as tableFromIPC } from "./loader-CMMa6QVT.js";
 function isDate(t) {
   return t instanceof Date || typeof t == "object" && Object.prototype.toString.call(t) === "[object Date]";
 }

package/dist/{useIframeCapabilities-DlwLttZw.js → useIframeCapabilities-BVQrlRBd.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { t as getIframeCapabilities } from "./capabilities-BC3mzKnw.js";
+import { t as getIframeCapabilities } from "./capabilities-26mwv03y.js";
 var import_compiler_runtime = require_compiler_runtime();
 require_react();
 function useIframeCapabilities() {

package/dist/{useLifecycle-CJ_5Z4Mk.js → useLifecycle-Dids8BPm.js}

@@ -4,7 +4,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
 import { l as createLucideIcon } from "./dist-D2Rk1j4R.js";
 import { a as cva, h as Logger, v as cn } from "./button-qsiIHncQ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { _ as useSetAtom, y as atom } from "./useTheme-BIAKDAh6.js";
+import { _ as useSetAtom, y as atom } from "./useTheme-Dm1WaAGy.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

package/dist/{useTheme-BIAKDAh6.js → useTheme-Dm1WaAGy.js}

@@ -3,7 +3,7 @@ import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
 import { h as Logger, l as resolvePlatform, s as OverridingHotkeyProvider } from "./button-qsiIHncQ.js";
 import { B as record, H as string, L as number, O as array, P as looseObject, R as object, W as union, k as boolean, w as _enum } from "./Combination-B--d1_LV.js";
-import { t as merge_default } from "./merge-Byt9w-nO.js";
+import { t as merge_default } from "./merge-CA_buyY3.js";
 var import_react = /* @__PURE__ */ __toESM(require_react()), useInsertionEffect = typeof window < "u" ? import_react.useInsertionEffect || import_react.useLayoutEffect : () => {
 };
 function useEvent(e) {

package/dist/vb-CXWH9DD-.js

@@ -0,0 +1,4 @@
+import { t as vb } from "./vb-D1pAvfDe.js";
+export {
+  vb
+};

package/dist/vbscript-qr8qVck5.js

@@ -0,0 +1,4 @@
+import { t as vbScript } from "./vbscript-DZ7RBxn5.js";
+export {
+  vbScript
+};

package/dist/{vega-component-CTOT0vRO.js → vega-component-BaDgUvQP.js}

@@ -1,23 +1,23 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { c as asRemoteURL, g as CircleQuestionMark } from "./toDate-BWaG12Pv.js";
+import { c as asRemoteURL, g as CircleQuestionMark } from "./toDate-D6VXexnV.js";
 import { h as Logger, m as Events, u as Objects, v as cn } from "./button-qsiIHncQ.js";
 import "./Combination-B--d1_LV.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
 import "./react-dom-BKwCWYPW.js";
 import { t as Tooltip } from "./tooltip-DGHTbHl5.js";
-import { i as debounce_default } from "./constants-CXiS0vdr.js";
-import { n as useTheme, w as useEvent_default } from "./useTheme-BIAKDAh6.js";
-import { c as uniq } from "./arrays--2cd0hte.js";
-import { a as AlertTitle, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-D2PKDkrk.js";
-import { n as ErrorBanner } from "./error-banner-DkDzvax3.js";
-import { n as formats } from "./vega-loader.browser-hMqVC9bf.js";
-import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-DrMJeyDu.js";
-import { t as useAsyncData } from "./useAsyncData-Dqt2tV1E.js";
-import { t as j } from "./react-vega-JMnqwKtN.js";
-import "./defaultLocale-DjFHq3Xk.js";
-import "./defaultLocale-B_A76Zpk.js";
+import { i as debounce_default } from "./constants-D1Am36hX.js";
+import { n as useTheme, w as useEvent_default } from "./useTheme-Dm1WaAGy.js";
+import { s as uniq } from "./arrays-Du-jRBAy.js";
+import { a as AlertTitle, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-DOzKCTzc.js";
+import { n as ErrorBanner } from "./error-banner-Bx9kIgrs.js";
+import { n as formats } from "./vega-loader.browser-DqEcFOPD.js";
+import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-CMMa6QVT.js";
+import { t as useAsyncData } from "./useAsyncData-Cd4Urlww.js";
+import { t as j } from "./react-vega-CzRAIHrv.js";
+import "./defaultLocale-qS7DaAmi.js";
+import "./defaultLocale-Bxoo2-30.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function fixRelativeUrl(e) {
   return e.data && "url" in e.data && (e.data.url = asRemoteURL(e.data.url).href), e;

package/dist/{vega-loader.browser-hMqVC9bf.js → vega-loader.browser-DqEcFOPD.js}

@@ -1,6 +1,6 @@
-import { a as tickStep, n as precisionPrefix_default, r as precisionFixed_default, s as bisector, t as precisionRound_default } from "./precisionRound-Duzbr5ur.js";
-import { i as formatSpecifier, n as formatPrefix, r as locale_default, t as format$1 } from "./defaultLocale-DjFHq3Xk.js";
-import { C as timeMinute, N as millisecond, S as utcHour, T as second, _ as utcSunday, a as formatLocale, b as utcDay, c as timeMonth, i as utcParse, l as utcMonth, n as timeParse, o as timeYear, p as timeSunday, r as utcFormat, s as utcYear, t as timeFormat, v as timeDay, w as utcMinute, x as timeHour } from "./defaultLocale-B_A76Zpk.js";
+import { a as tickStep, n as precisionPrefix_default, r as precisionFixed_default, s as bisector, t as precisionRound_default } from "./precisionRound-CGLoV26P.js";
+import { i as formatSpecifier, n as formatPrefix, r as locale_default, t as format$1 } from "./defaultLocale-qS7DaAmi.js";
+import { C as timeMinute, N as millisecond, S as utcHour, T as second, _ as utcSunday, a as formatLocale, b as utcDay, c as timeMonth, i as utcParse, l as utcMonth, n as timeParse, o as timeYear, p as timeSunday, r as utcFormat, s as utcYear, t as timeFormat, v as timeDay, w as utcMinute, x as timeHour } from "./defaultLocale-Bxoo2-30.js";
 function accessor(o, P, F) {
   return o.fields = P || [], o.fname = F, o;
 }

package/dist/velocity-C_9pUJRx.js

@@ -0,0 +1,4 @@
+import { t as velocity } from "./velocity-Csau7eZy.js";
+export {
+  velocity
+};

package/dist/verilog-DxBstgBa.js

@@ -0,0 +1,4 @@
+import { t as verilog } from "./verilog-gXlZACs5.js";
+export {
+  verilog
+};

package/dist/vhdl-odUxAbE6.js

@@ -0,0 +1,4 @@
+import { t as vhdl } from "./vhdl-NaUWbI1B.js";
+export {
+  vhdl
+};

package/dist/webidl-Dfn5Rku4.js

@@ -0,0 +1,4 @@
+import { t as webIDL } from "./webidl-BJmPjW01.js";
+export {
+  webIDL
+};

package/dist/xquery-CrJs6SXr.js

@@ -0,0 +1,4 @@
+import { t as xQuery } from "./xquery-CJIPsC0g.js";
+export {
+  xQuery
+};

package/dist/{xychartDiagram-PRI3JC2R-DC0-6FAB.js → xychartDiagram-PRI3JC2R-ehVeySMW.js}

@@ -1,17 +1,17 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-import "./purify.es-BwXbuO3r.js";
-import { t as linear } from "./linear-CJ6ctpF3.js";
-import { n as ordinal } from "./ordinal-COPPjmMz.js";
-import { t as range } from "./range-DwpxnYuB.js";
-import "./defaultLocale-DjFHq3Xk.js";
-import { t as line_default } from "./line-LK_5q2B9.js";
-import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-KAv7zltL.js";
-import { n as initRange } from "./init-BfRhston.js";
-import { i as log, r as __name } from "./src-szye8OCw.js";
-import { B as setAccTitle, C as getDiagramTitle, I as sanitizeText, T as getThemeVariables3, U as setDiagramTitle, _ as getAccDescription, a as clear, c as configureSvgSize, d as defaultConfig_default, v as getAccTitle, y as getConfig, z as setAccDescription } from "./chunk-ABZYJK2D-DYZpeLRO.js";
-import { t as selectSvgElement } from "./chunk-EXTU4WIE-anbpETeD.js";
-import "./dist-CqR8FBcH.js";
-import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-DT9thFja.js";
+import "./purify.es-ukiMXY-F.js";
+import { t as linear } from "./linear-v57w-fIs.js";
+import { n as ordinal } from "./ordinal-D7fa8Sey.js";
+import { t as range } from "./range-BYuZFTbA.js";
+import "./defaultLocale-qS7DaAmi.js";
+import { t as line_default } from "./line-PAEmCpyD.js";
+import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-D3Rys9ZW.js";
+import { n as initRange } from "./init-Cge3yl4r.js";
+import { i as log, r as __name } from "./src-DbP20yFZ.js";
+import { B as setAccTitle, C as getDiagramTitle, I as sanitizeText, T as getThemeVariables3, U as setDiagramTitle, _ as getAccDescription, a as clear, c as configureSvgSize, d as defaultConfig_default, v as getAccTitle, y as getConfig, z as setAccDescription } from "./chunk-ABZYJK2D-D5YIs71w.js";
+import { t as selectSvgElement } from "./chunk-EXTU4WIE-CgefpSXQ.js";
+import "./dist-BjWd_Ei9.js";
+import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-CcIOIFpc.js";
 function band() {
   var e = ordinal().unknown(void 0), w = e.domain, T = e.range, D = 0, O = 1, k, A, j = false, M = 0, N = 0, P = 0.5;
   delete e.unknown;

package/dist/yacas-B-uDDLZe.js

@@ -0,0 +1,4 @@
+import { t as yacas } from "./yacas-8f2Vjiiz.js";
+export {
+  yacas
+};

package/dist/z80-51gxgAXE.js

@@ -0,0 +1,4 @@
+import { t as z80 } from "./z80-s5Xk2hCP.js";
+export {
+  z80
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.21.2-dev99",
+  "version": "0.22.1-dev10",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/__tests__/branded.ts

@@ -10,11 +10,17 @@
  * everywhere.
  */
 
+import type { components } from "@marimo-team/marimo-api";
 import type { CellId, UIElementId } from "@/core/cells/ids";
 import type { RequestId } from "@/core/network/DeferredRequestRegistry";
 import type { VariableName } from "@/core/variables/types";
 
+type WidgetModelId = components["schemas"]["WidgetModelId"];
+type Base64String = components["schemas"]["Base64String"];
+
 export const cellId = (s: string) => s as CellId;
 export const variableName = (s: string) => s as VariableName;
 export const requestId = (s: string) => s as RequestId;
 export const uiElementId = (s: string) => s as UIElementId;
+export const widgetModelId = (s: string) => s as WidgetModelId;
+export const base64String = (s: string) => s as Base64String;

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

@@ -0,0 +1,176 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
+
+import type { RowSelectionState, Table } from "@tanstack/react-table";
+import { useLocale } from "react-aria";
+import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
+import { cn } from "@/utils/cn";
+import { Events } from "@/utils/events";
+import { prettyNumber } from "@/utils/numbers";
+import { Button } from "../ui/button";
+import { toast } from "../ui/use-toast";
+import { DataTablePagination, prettifyRowColumnCount } from "./pagination";
+import { CellSelectionStats } from "./range-focus/cell-selection-stats";
+import type { DataTableSelection } from "./types";
+
+interface TableBottomBarProps<TData> {
+  pagination: boolean;
+  totalColumns: number;
+  selection?: DataTableSelection;
+  onRowSelectionChange?: (value: RowSelectionState) => void;
+  table: Table<TData>;
+  getRowIds?: GetRowIds;
+  showPageSizeSelector?: boolean;
+  tableLoading?: boolean;
+  part?: string;
+  className?: string;
+}
+
+export const TableBottomBar = <TData,>({
+  pagination,
+  totalColumns,
+  selection,
+  onRowSelectionChange,
+  table,
+  getRowIds,
+  showPageSizeSelector,
+  tableLoading,
+  part,
+  className,
+}: TableBottomBarProps<TData>) => {
+  const { locale } = useLocale();
+  const handleSelectAllRows = (value: boolean) => {
+    if (!onRowSelectionChange) {
+      return;
+    }
+
+    // Clear all selections
+    if (!value) {
+      onRowSelectionChange({});
+      return;
+    }
+
+    const selectAllRowsByIndex = () => {
+      const allKeys = Array.from(
+        { length: table.getRowCount() },
+        (_, i) => [i, true] as const,
+      );
+      onRowSelectionChange(Object.fromEntries(allKeys));
+    };
+
+    if (!getRowIds) {
+      selectAllRowsByIndex();
+      return;
+    }
+
+    getRowIds({}).then((data) => {
+      if (data.error) {
+        toast({
+          title: "Not available",
+          description: data.error,
+          variant: "danger",
+        });
+        return;
+      }
+
+      if (data.all_rows) {
+        selectAllRowsByIndex();
+      } else {
+        onRowSelectionChange(
+          Object.fromEntries(data.row_ids.map((id) => [id, true])),
+        );
+      }
+    });
+  };
+
+  const renderTotal = () => {
+    const { rowSelection, cellSelection } = table.getState();
+    let selected = Object.keys(rowSelection).length;
+    let isAllPageSelected = table.getIsAllPageRowsSelected();
+    const numRows = table.getRowCount();
+    let isAllSelected = selected === numRows;
+
+    const isCellSelection =
+      selection === "single-cell" || selection === "multi-cell";
+    if (isCellSelection) {
+      selected = cellSelection.length;
+      isAllPageSelected = false;
+      isAllSelected = false;
+    }
+
+    if (isAllPageSelected && !isAllSelected) {
+      return (
+        <>
+          <span>{prettyNumber(selected, locale)} selected</span>
+          <Button
+            size="xs"
+            data-testid="select-all-button"
+            variant="link"
+            className="h-4 print:hidden"
+            onMouseDown={Events.preventFocus}
+            onClick={() => handleSelectAllRows(true)}
+          >
+            Select all {prettyNumber(numRows, locale)}
+          </Button>
+        </>
+      );
+    }
+
+    if (selected) {
+      return (
+        <>
+          <span>{prettyNumber(selected, locale)} selected</span>
+          <Button
+            size="xs"
+            data-testid="clear-selection-button"
+            variant="link"
+            className="h-4 print:hidden"
+            onMouseDown={Events.preventFocus}
+            onClick={() => {
+              if (!isCellSelection) {
+                handleSelectAllRows(false);
+              } else if (table.resetCellSelection) {
+                table.resetCellSelection();
+              }
+            }}
+          >
+            Clear selection
+          </Button>
+        </>
+      );
+    }
+
+    return (
+      <span>
+        {prettifyRowColumnCount(table.getRowCount(), totalColumns, locale)}
+      </span>
+    );
+  };
+
+  return (
+    <div
+      part={part}
+      className={cn(
+        "flex lg:grid lg:grid-cols-[1fr_auto_1fr] items-center shrink-0",
+        className,
+      )}
+    >
+      <div className="flex flex-col text-sm text-muted-foreground px-2 shrink-0">
+        <div className="flex items-center gap-1">{renderTotal()}</div>
+        <CellSelectionStats table={table} className="lg:hidden" />
+      </div>
+      <div className="ml-auto lg:ml-0 lg:justify-self-center flex items-center shrink-0">
+        {pagination && (
+          <DataTablePagination
+            table={table}
+            tableLoading={tableLoading}
+            showPageSizeSelector={showPageSizeSelector}
+          />
+        )}
+      </div>
+      <div className="hidden lg:flex justify-end">
+        <CellSelectionStats table={table} className="px-2" />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,137 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
+
+import { useDebounce } from "@uidotdev/usehooks";
+import {
+  ChartSplineIcon,
+  PanelRightIcon,
+  SearchIcon,
+  XIcon,
+} from "lucide-react";
+import React, { useEffect, useState } from "react";
+import useEvent from "react-use-event-hook";
+import { cn } from "@/utils/cn";
+import {
+  PANEL_TYPES,
+  type PanelType,
+} from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
+import { Spinner } from "../icons/spinner";
+import { Button } from "../ui/button";
+import { type ExportActionProps, ExportMenu } from "./export-actions";
+
+const NOOP_ON_SEARCH = () => {
+  /** no-op*/
+};
+
+interface TableTopBarProps extends Partial<ExportActionProps> {
+  enableSearch: boolean;
+  searchQuery?: string;
+  onSearchQueryChange?: (query: string) => void;
+  reloading?: boolean;
+  showChartBuilder?: boolean;
+  isChartBuilderOpen?: boolean;
+  toggleDisplayHeader?: () => void;
+  showTableExplorer?: boolean;
+  togglePanel?: (panelType: PanelType) => void;
+  isAnyPanelOpen?: boolean;
+}
+
+export const TableTopBar: React.FC<TableTopBarProps> = ({
+  enableSearch,
+  searchQuery,
+  onSearchQueryChange,
+  reloading,
+  showChartBuilder,
+  isChartBuilderOpen,
+  toggleDisplayHeader,
+  showTableExplorer,
+  togglePanel,
+  isAnyPanelOpen,
+  downloadAs,
+}) => {
+  const [internalValue, setInternalValue] = useState(searchQuery || "");
+  const debouncedSearch = useDebounce(internalValue, 500);
+  const onSearch = useEvent(onSearchQueryChange ?? NOOP_ON_SEARCH);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    onSearch(debouncedSearch);
+  }, [debouncedSearch, onSearch]);
+
+  const hasAnyAction =
+    (enableSearch && onSearchQueryChange) ||
+    showChartBuilder ||
+    showTableExplorer ||
+    downloadAs;
+
+  if (!hasAnyAction) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center h-10 px-2 border-b gap-2">
+      {onSearchQueryChange && enableSearch && (
+        <div className="flex flex-1 items-center gap-1 px-2 rounded-sm focus-within:ring-1 focus-within:ring-border transition-shadow">
+          <SearchIcon className="w-4 h-4 text-muted-foreground shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            className="h-6 border-none bg-transparent focus:outline-hidden text-sm w-full min-w-0"
+            value={internalValue}
+            onKeyDown={(e) => {
+              if (e.key === "Escape") {
+                setInternalValue("");
+                inputRef.current?.blur();
+              }
+            }}
+            onChange={(e) => setInternalValue(e.target.value)}
+            placeholder="Search..."
+          />
+          {reloading && <Spinner size="small" />}
+          {internalValue && (
+            <Button
+              variant="text"
+              size="xs"
+              className="h-5 w-5 p-0 shrink-0"
+              onClick={() => setInternalValue("")}
+            >
+              <XIcon className="w-3 h-3 text-muted-foreground" />
+            </Button>
+          )}
+        </div>
+      )}
+
+      <div className="flex items-center shrink-0">
+        {showChartBuilder && (
+          <Button
+            variant="text"
+            size="xs"
+            className={cn(
+              "print:hidden text-xs gap-1",
+              isChartBuilderOpen ? "text-primary" : "text-muted-foreground",
+            )}
+            onClick={toggleDisplayHeader}
+          >
+            <ChartSplineIcon className="w-3.5 h-3.5" />
+            Visualize
+          </Button>
+        )}
+        {showTableExplorer && togglePanel && (
+          <Button
+            variant="text"
+            size="xs"
+            className={cn(
+              "print:hidden text-xs gap-1",
+              isAnyPanelOpen ? "text-primary" : "text-muted-foreground",
+            )}
+            onClick={() => togglePanel(PANEL_TYPES.ROW_VIEWER)}
+          >
+            <PanelRightIcon className="w-3.5 h-3.5" />
+            Explorer
+          </Button>
+        )}
+        {downloadAs && <ExportMenu downloadAs={downloadAs} />}
+      </div>
+    </div>
+  );
+};