@marimo-team/islands 0.16.2 → 0.16.3

package/dist/{time-DCvYzQ5t.js → time-Z7CJSfOW.js}

@@ -1,7 +1,7 @@
 import { R as q, r as ln, o as P, q as X, C as Z, u as D, v as fn } from "./timer-B0-z63CM.js";
-import { c as hn, a as on } from "./linear-BKZuvJrK.js";
+import { c as hn, a as on } from "./linear-CHnELER9.js";
 import { i as bn } from "./init-DxzjmxYy.js";
-import { W as gn, X as d, Y as v, Z as k, _ as x, $ as L, a0 as yn, a1 as R, a2 as H, a3 as W, a4 as pn, a5 as mn, a6 as wn, a7 as Mn, a8 as dn, a9 as vn, aa as kn, ab as $, ac as A, ad as B, ae as K, af as _, ag as j, ah as xn } from "./main-pE28kbH0.js";
+import { W as gn, X as d, Y as v, Z as k, _ as x, $ as L, a0 as yn, a1 as R, a2 as H, a3 as W, a4 as pn, a5 as mn, a6 as wn, a7 as Mn, a8 as dn, a9 as vn, aa as kn, ab as $, ac as A, ad as B, ae as K, af as _, ag as j, ah as xn } from "./main-kLZGkzVQ.js";
 function Pn(n, t) {
   let i;
   if (t === void 0)

package/dist/{timeline-definition-XQNQX7LJ-CSbxJ5mV.js → timeline-definition-XQNQX7LJ-BYLMfrvK.js}

@@ -1,4 +1,4 @@
-import { _ as s, c as xt, l as E, d as j, V as kt, W as vt, X as _t, Y as bt, D as wt, $ as St, z as Et } from "./mermaid-BGd7kEsf.js";
+import { _ as s, c as xt, l as E, d as j, V as kt, W as vt, X as _t, Y as bt, D as wt, $ as St, z as Et } from "./mermaid-DgM4_4bD.js";
 import { d as nt } from "./arc-BOhn-m2C.js";
 var Q = (function() {
   var n = /* @__PURE__ */ s(function(x, r, a, c) {

package/dist/{treemap-75Q7IDZK-LMXGKln_.js → treemap-75Q7IDZK-BEh1HacP.js}

@@ -2,11 +2,11 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a2, _b, _c2, _d2, _e, _f2, _g, _h2, _i2, _j, _k, _l2, _m2, _n2, _o2, _p2, _q;
-import { d_ as Kl, bQ as Vl, al as Ma, aT as Hl, u as _t, aO as Wl, ao as Z, bk as jl, bl as zl, k as ql, n as Ni, m as Da, am as Zs, d$ as Fa, aK as Yl, b0 as Ga, e0 as Ua, aM as Xl, b2 as wi, an as Jl, e1 as Ql, bg as Zl, e2 as eu, aP as Ie, q as vt, ar as _i, b3 as tu, e3 as H, e4 as Re } from "./main-pE28kbH0.js";
-import { g as ei, d as bt, k as nu, v as W, l as Ba, m as ru, n as su, a as Ka, c as x, i as qe, r as ae, f as ke, o as z } from "./_baseUniq-BykZEXIq.js";
-import { m as k, f as Lt, h as I, e as ti, l as Ot, d as iu } from "./min-DmsBJf5S.js";
-import { ad as P } from "./mermaid-BGd7kEsf.js";
-import { c as te } from "./clone-CDDiMerE.js";
+import { d_ as Kl, bQ as Vl, al as Ma, aT as Hl, u as _t, aO as Wl, ao as Z, bk as jl, bl as zl, k as ql, n as Ni, m as Da, am as Zs, d$ as Fa, aK as Yl, b0 as Ga, e0 as Ua, aM as Xl, b2 as wi, an as Jl, e1 as Ql, bg as Zl, e2 as eu, aP as Ie, q as vt, ar as _i, b3 as tu, e3 as H, e4 as Re } from "./main-kLZGkzVQ.js";
+import { g as ei, d as bt, k as nu, v as W, l as Ba, m as ru, n as su, a as Ka, c as x, i as qe, r as ae, f as ke, o as z } from "./_baseUniq-D-Kb4EU4.js";
+import { m as k, f as Lt, h as I, e as ti, l as Ot, d as iu } from "./min-cX4DuL_n.js";
+import { ad as P } from "./mermaid-DgM4_4bD.js";
+import { c as te } from "./clone-Dkt_7KOK.js";
 var au = Object.prototype, ou = au.hasOwnProperty, Ee = Kl(function(n, e) {
   if (Vl(e) || Ma(e)) {
     Hl(e, _t(e), n);

package/dist/{vega-component-CRmon7pH.js → vega-component-iMjXd3tD.js}

@@ -1,5 +1,5 @@
-import { D as V, F as K, A as Z, G as z, H as R, I as G, j as d, E as W, J as U, r as k, K as j, M, N as $, L as x, O as _, P as B, Q, S as q, T as J, U as Y, V as X } from "./main-pE28kbH0.js";
-import { M as m, V as ee } from "./index-CZ9vIBEc.js";
+import { D as V, F as K, A as Z, G as z, H as R, I as G, j as d, E as W, J as U, r as k, K as j, M, N as $, L as x, O as _, P as B, Q, S as q, T as J, U as Y, V as X } from "./main-kLZGkzVQ.js";
+import { M as m, V as ee } from "./index-DMo6cbcV.js";
 function te(e) {
   return e.data && "url" in e.data && (e.data.url = V(e.data.url).href), e;
 }

package/dist/{xychartDiagram-6GGTOJPD-DaUD4dq3.js → xychartDiagram-6GGTOJPD-Bmi13ZSG.js}

@@ -1,9 +1,9 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _i2, _j;
-import { _ as a, s as ei, g as si, t as Lt, q as ni, a as ai, b as oi, l as Et, K as ri, e as hi, z as li, G as xt, F as It, H as ci, M as ui, i as gi, ac as xi } from "./mermaid-BGd7kEsf.js";
+import { _ as a, s as ei, g as si, t as Lt, q as ni, a as ai, b as oi, l as Et, K as ri, e as hi, z as li, G as xt, F as It, H as ci, M as ui, i as gi, ac as xi } from "./mermaid-DgM4_4bD.js";
 import { i as di } from "./init-DxzjmxYy.js";
 import { o as fi } from "./ordinal-CYN5qNoq.js";
 import { r as pi } from "./range-DdOGybNB.js";
-import { l as Tt } from "./linear-BKZuvJrK.js";
+import { l as Tt } from "./linear-CHnELER9.js";
 import { l as Dt } from "./timer-B0-z63CM.js";
 function ht() {
   var t = fi().unknown(void 0), i = t.domain, e = t.range, s = 0, n = 1, d, g, m = false, S = 0, D = 0, v = 0.5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.16.2",
+  "version": "0.16.3",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -52,7 +52,7 @@
     "@marimo-team/codemirror-ai": "^0.3.2",
     "@marimo-team/codemirror-languageserver": "1.15.24",
     "@marimo-team/codemirror-mcp": "^0.1.5",
-    "@marimo-team/codemirror-sql": "^0.2.1",
+    "@marimo-team/codemirror-sql": "^0.2.3",
     "@marimo-team/llm-info": "workspace:*",
     "@marimo-team/marimo-api": "workspace:*",
     "@marimo-team/react-slotz": "^0.2.0",
@@ -205,9 +205,9 @@
     "@codecov/vite-plugin": "^1.9.1",
     "@csstools/postcss-light-dark-function": "^2.0.10",
     "@playwright/test": "^1.55.0",
-    "@storybook/addon-docs": "^9.1.3",
-    "@storybook/addon-links": "^9.1.3",
-    "@storybook/react-vite": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.8",
+    "@storybook/addon-links": "^9.1.8",
+    "@storybook/react-vite": "^9.1.8",
     "@swc-jotai/react-refresh": "^0.3.0",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
@@ -242,7 +242,7 @@
     "react": "^19.1.1",
     "react-compiler-runtime": "19.1.0-rc.3",
     "react-dom": "^19.1.1",
-    "storybook": "^9.1.3",
+    "storybook": "^9.1.8",
     "stylelint": "^16.23.1",
     "stylelint-config-standard": "^36.0.1",
     "tailwindcss": "^4.1.13",

package/src/__mocks__/common.ts

@@ -1,5 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-/* eslint-disable no-console */
+/** biome-ignore-all lint/suspicious/noConsole: for debugging */
 import { type Mock, vi } from "vitest";
 import { invariant } from "@/utils/invariant";
 
@@ -108,8 +108,10 @@ export const SetupMocks = {
           delete store[key];
         }),
         clear: vi.fn(() => {
-          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-          Object.keys(store).forEach((key) => delete store[key]);
+          for (const key of Object.keys(store)) {
+            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+            delete store[key];
+          }
         }),
         key: vi.fn((index: number) => Object.keys(store)[index] || null),
         get length() {

package/src/__mocks__/notebook.ts

@@ -134,11 +134,11 @@ export const MockNotebook = {
    * Create a notebook state with error outputs for testing ErrorContextProvider
    */
   notebookStateWithErrors: (
-    errors: Array<{
+    errors: {
       cellId: CellId;
       cellName: string;
       errorData: MarimoError[];
-    }>,
+    }[],
   ): NotebookState => {
     const cellData: Record<string, Partial<CellData>> = {};
 

package/src/__tests__/main.test.tsx

@@ -23,7 +23,7 @@ vi.mock("../utils/vitals", () => ({
 }));
 
 vi.mock("react-dom/client", () => ({
-  createRoot: vi.fn().mockImplementation((el) => {
+  createRoot: vi.fn().mockImplementation((_el) => {
     return {
       render: vi.fn(),
     };
@@ -47,7 +47,7 @@ describe("main", () => {
 
   it.each(["edit", "read", "home", "run"])(
     "should mount with mode %s",
-    (mode) => {
+    (_mode) => {
       const el = document.createElement("div");
       mount({ mode: "edit" }, el);
 

package/src/components/ai/ai-provider-icon.tsx

@@ -8,6 +8,7 @@ import GitHubIcon from "@marimo-team/llm-info/icons/github.svg?inline";
 import GeminiIcon from "@marimo-team/llm-info/icons/googlegemini.svg?inline";
 import OllamaIcon from "@marimo-team/llm-info/icons/ollama.svg?inline";
 import OpenAIIcon from "@marimo-team/llm-info/icons/openai.svg?inline";
+import OpenRouterIcon from "@marimo-team/llm-info/icons/openrouter.svg?inline";
 import { BotIcon } from "lucide-react";
 import * as React from "react";
 import type { ProviderId } from "@/core/ai/ids/ids";
@@ -27,6 +28,7 @@ const icons: Record<ProviderId | Aliases, string> = {
   bedrock: BedrockIcon,
   deepseek: DeepseekIcon,
   github: GitHubIcon,
+  openrouter: OpenRouterIcon,
   marimo: marimoIcon,
 };
 

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

@@ -734,6 +734,36 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
           />
         </AccordionFormItem>
 
+        <AccordionFormItem
+          title="OpenRouter"
+          provider="openrouter"
+          isConfigured={hasValue("ai.openrouter.api_key")}
+        >
+          <ApiKey
+            form={form}
+            config={config}
+            name="ai.openrouter.api_key"
+            placeholder="or-..."
+            testId="ai-openrouter-api-key-input"
+            description={
+              <>
+                Your OpenRouter API key from {""}
+                <ExternalLink href="https://openrouter.ai/keys">
+                  openrouter.ai
+                </ExternalLink>
+                .
+              </>
+            }
+          />
+          <BaseUrl
+            form={form}
+            config={config}
+            name="ai.openrouter.base_url"
+            placeholder="https://openrouter.ai/api/v1/"
+            testId="ai-openrouter-base-url-input"
+          />
+        </AccordionFormItem>
+
         <AccordionFormItem
           title="Azure"
           provider="azure"
@@ -761,7 +791,8 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
             form={form}
             config={config}
             name="ai.azure.base_url"
-            placeholder="https://<your-resource-name>.openai.azure.com"
+            placeholder="https://<your-resource-name>.openai.azure.com/openai/deployments/<deployment-name>?api-version=<api-version>"
+            defaultValue="https://<your-resource-name>.openai.azure.com/openai/deployments/<deployment-name>?api-version=<api-version>"
             testId="ai-azure-base-url-input"
           />
         </AccordionFormItem>

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

@@ -36,10 +36,10 @@ export const SettingDescription: React.FC<PropsWithChildren> = ({
   return <p className="text-sm text-muted-foreground">{children}</p>;
 };
 
-export const SQL_OUTPUT_SELECT_OPTIONS: Array<{
+export const SQL_OUTPUT_SELECT_OPTIONS: {
   label: string;
   value: SqlOutputType;
-}> = [
+}[] = [
   { label: "Auto (Default)", value: "auto" },
   { label: "Native", value: "native" },
   { label: "Polars", value: "polars" },

package/src/components/app-config/user-config-form.tsx

@@ -1359,6 +1359,32 @@ export const UserConfigForm: React.FC = () => {
                 </div>
               )}
             />
+            <FormField
+              control={form.control}
+              name="experimental.chat_modes"
+              render={({ field }) => (
+                <div className="flex flex-col gap-y-1">
+                  <FormItem className={formItemClasses}>
+                    <FormLabel className="font-normal">Chat Mode</FormLabel>
+                    <FormControl>
+                      <Checkbox
+                        data-testid="chat-mode-checkbox"
+                        checked={field.value === true}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                  <IsOverridden
+                    userConfig={config}
+                    name="experimental.chat_modes"
+                  />
+                  <FormDescription>
+                    Switch between different modes in the Chat sidebar, to
+                    enable tool use.
+                  </FormDescription>
+                </div>
+              )}
+            />
           </SettingGroup>
         );
     }

package/src/components/audio/audio-recorder.tsx

@@ -17,7 +17,6 @@ interface AudioRecorderProps {
 export const AudioRecorder: React.FC<AudioRecorderProps> = ({
   onStart,
   onStop,
-  onPause,
   status,
   time,
 }) => {

package/src/components/chat/acp/blocks.tsx

@@ -528,7 +528,7 @@ export const CurrentModeBlock = (props: {
 };
 
 export const ToolNotificationsBlock = (props: {
-  data: Array<ToolCallNotificationEvent | ToolCallUpdateNotificationEvent>;
+  data: (ToolCallNotificationEvent | ToolCallUpdateNotificationEvent)[];
 }) => {
   const toolCalls = mergeToolCalls(props.data);
 
@@ -561,7 +561,7 @@ export const ToolNotificationsBlock = (props: {
 };
 
 export const DiffBlocks = (props: {
-  data: Array<Extract<ToolCallContent, { type: "diff" }>>;
+  data: Extract<ToolCallContent, { type: "diff" }>[];
 }) => {
   return (
     <div className="flex flex-col gap-2 text-muted-foreground">

package/src/components/chat/acp/thread.tsx

@@ -99,23 +99,21 @@ export const AgentThread = ({
 
 function isErrorGroup(
   group: NotificationEvent[],
-): group is Array<Extract<NotificationEvent, { type: "error" }>> {
+): group is Extract<NotificationEvent, { type: "error" }>[] {
   // We only check the first since we know the group is the same type
   return group[0].type === "error";
 }
 
 function isConnectionChangeGroup(
   group: NotificationEvent[],
-): group is Array<Extract<NotificationEvent, { type: "connection_change" }>> {
+): group is Extract<NotificationEvent, { type: "connection_change" }>[] {
   // We only check the first since we know the group is the same type
   return group[0].type === "connection_change";
 }
 
 function isSessionNotificationGroup(
   group: NotificationEvent[],
-): group is Array<
-  Extract<NotificationEvent, { type: "session_notification" }>
-> {
+): group is Extract<NotificationEvent, { type: "session_notification" }>[] {
   // We only check the first since we know the group is the same type
   return group[0].type === "session_notification";
 }

package/src/components/chat/acp/utils.ts

@@ -3,7 +3,7 @@ import type { NotificationDataOf, SessionNotificationEventData } from "./types";
 
 export function isToolCalls(
   group: SessionNotificationEventData[],
-): group is Array<NotificationDataOf<"tool_call" | "tool_call_update">> {
+): group is NotificationDataOf<"tool_call" | "tool_call_update">[] {
   // We only check the first since we know the group is the same type
   const first = group[0];
   return (
@@ -14,7 +14,7 @@ export function isToolCalls(
 
 export function isAgentThoughts(
   group: SessionNotificationEventData[],
-): group is Array<NotificationDataOf<"agent_thought_chunk">> {
+): group is NotificationDataOf<"agent_thought_chunk">[] {
   // We only check the first since we know the group is the same type
   const first = group[0];
   return first.sessionUpdate === "agent_thought_chunk";
@@ -22,7 +22,7 @@ export function isAgentThoughts(
 
 export function isUserMessages(
   group: SessionNotificationEventData[],
-): group is Array<NotificationDataOf<"user_message_chunk">> {
+): group is NotificationDataOf<"user_message_chunk">[] {
   // We only check the first since we know the group is the same type
   const first = group[0];
   return first.sessionUpdate === "user_message_chunk";
@@ -30,7 +30,7 @@ export function isUserMessages(
 
 export function isAgentMessages(
   group: SessionNotificationEventData[],
-): group is Array<NotificationDataOf<"agent_message_chunk">> {
+): group is NotificationDataOf<"agent_message_chunk">[] {
   // We only check the first since we know the group is the same type
   const first = group[0];
   return first.sessionUpdate === "agent_message_chunk";
@@ -38,7 +38,7 @@ export function isAgentMessages(
 
 export function isPlans(
   group: SessionNotificationEventData[],
-): group is Array<NotificationDataOf<"plan">> {
+): group is NotificationDataOf<"plan">[] {
   // We only check the first since we know the group is the same type
   const first = group[0];
   return first.sessionUpdate === "plan";

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

@@ -369,7 +369,7 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
       <TooltipProvider>
         <div className="px-3 py-2 border-t border-border/20 flex flex-row items-center justify-between">
           <div className="flex items-center gap-2">
-            <FeatureFlagged feature="mcp_docs">
+            <FeatureFlagged feature="chat_modes">
               <Select value={currentMode} onValueChange={saveModeChange}>
                 <SelectTrigger className="h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1 capitalize">
                   {currentMode}

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

@@ -18,7 +18,7 @@ describe("DataTable", () => {
       { id: 2, name: "Test 2" },
     ];
 
-    const columns: Array<ColumnDef<TestData>> = [
+    const columns: ColumnDef<TestData>[] = [
       { accessorKey: "name", header: "Name" },
     ];
 
@@ -70,7 +70,7 @@ describe("DataTable", () => {
       { id: 2, first: "Jim", last: "Halpert" },
     ];
 
-    const columns: Array<ColumnDef<RowData>> = [
+    const columns: ColumnDef<RowData>[] = [
       { accessorKey: "first", header: "First" },
       { accessorKey: "last", header: "Last" },
     ];

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

@@ -11,7 +11,7 @@ function createSpec(spec: {
   encoding: Record<
     string,
     | { field: string; type?: string }
-    | Array<{ field: string; tooltip?: Record<string, string> }>
+    | { field: string; tooltip?: Record<string, string> }[]
   >;
   resolve?: Record<string, unknown>;
   title?: string;

package/src/components/data-table/charts/chart-spec/tooltips.ts

@@ -29,7 +29,7 @@ interface GetTooltipParams {
 
 export function getTooltips(
   params: GetTooltipParams,
-): Array<StringFieldDef<string>> | undefined {
+): StringFieldDef<string>[] | undefined {
   const { formValues, xEncoding, yEncoding, colorByEncoding } = params;
 
   if (!formValues.tooltips) {
@@ -73,7 +73,7 @@ export function getTooltips(
 
   // If autoTooltips is enabled, we manually add the x, y, and color columns to the tooltips
   if (formValues.tooltips.auto) {
-    const tooltips: Array<StringFieldDef<string>> = [];
+    const tooltips: StringFieldDef<string>[] = [];
     const xTooltip = addTooltip(
       xEncoding,
       formValues.general?.xColumn?.type || "string",
@@ -105,7 +105,7 @@ export function getTooltips(
 
   // Selected tooltips from the form.
   const selectedTooltips = formValues.tooltips.fields ?? [];
-  const tooltips: Array<StringFieldDef<string>> = [];
+  const tooltips: StringFieldDef<string>[] = [];
 
   // We need to find the matching columns for the selected tooltips if they exist
   // Otherwise, we can add them without other parameters

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

@@ -103,7 +103,7 @@ const ColumnSelectorWithAggregation: React.FC<{
     selectedDataType?: SelectedDataType;
   };
   defaultAggregation?: AggregationFn;
-  columns: Array<{ name: string; type: DataType }>;
+  columns: { name: string; type: DataType }[];
   binFieldName: FieldName;
 }> = ({
   columnFieldName,

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

@@ -86,7 +86,7 @@ export const ColumnSelector = ({
   includeCountField = true,
 }: {
   fieldName: FieldName;
-  columns: Array<{ name: string; type: DataType }>;
+  columns: { name: string; type: DataType }[];
   onValueChange?: (fieldName: string, type: DataType | undefined) => void;
   includeCountField?: boolean;
 }) => {
@@ -197,7 +197,7 @@ export const SelectField = ({
 }: {
   fieldName: FieldName;
   label: string;
-  options: Array<{ display: React.ReactNode; value: string }>;
+  options: { display: React.ReactNode; value: string }[];
   defaultValue: string;
 }) => {
   const form = useFormContext();

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

@@ -79,7 +79,7 @@ export const AGGREGATION_TYPE_DESCRIPTIONS: Record<AggregationFn, string> = {
   bin: "Group values into bins",
 };
 
-export const COLOR_SCHEMES: Array<ColorScheme | typeof DEFAULT_COLOR_SCHEME> = [
+export const COLOR_SCHEMES: (ColorScheme | typeof DEFAULT_COLOR_SCHEME)[] = [
   DEFAULT_COLOR_SCHEME,
   // Categorical schemes
   "accent",

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

@@ -211,7 +211,7 @@ const ColumnPreview = ({
       refetchPreview,
     });
 
-  const previewStats = stats && renderStats(stats, dataType, locale);
+  const previewStats = stats && renderStats({ stats, dataType, locale });
 
   const chart = chart_spec && renderChart(chart_spec, theme);
 

package/src/components/data-table/column-summary/chart-spec-model.tsx

@@ -778,14 +778,14 @@ export class ColumnChartSpecModel<T> {
         const yField = "value";
 
         // Calculate xStart and xEnd for each value count
-        const newValueCounts: Array<{
+        const newValueCounts: {
           count: number;
           value: string;
           xStart: number;
           xEnd: number;
           xMid: number;
           proportion: number;
-        }> = [];
+        }[] = [];
         let xStart = 0;
         for (const valueCount of valueCounts) {
           const xEnd = xStart + valueCount.count;

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

@@ -117,7 +117,7 @@ export function generateColumns<T>({
   headerTooltip?: Record<string, string>;
   showDataTypes?: boolean;
   calculateTopKRows?: CalculateTopKRows;
-}): Array<ColumnDef<T>> {
+}): ColumnDef<T>[] {
   // Row-headers are typically index columns
   const rowHeadersSet = new Set(rowHeaders.map(([columnName]) => columnName));
 

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

@@ -47,7 +47,8 @@ import { getStableRowId } from "./utils";
 interface DataTableProps<TData> extends Partial<DownloadActionProps> {
   wrapperClassName?: string;
   className?: string;
-  columns: Array<ColumnDef<TData>>;
+  maxHeight?: number;
+  columns: ColumnDef<TData>[];
   data: TData[];
   // Sorting
   manualSorting?: boolean; // server-side sorting
@@ -95,6 +96,7 @@ interface DataTableProps<TData> extends Partial<DownloadActionProps> {
 const DataTableInternal = <TData,>({
   wrapperClassName,
   className,
+  maxHeight,
   columns,
   data,
   selection,
@@ -250,6 +252,36 @@ const DataTableInternal = <TData,>({
 
   const rowViewerPanelOpen = isPanelOpen?.("row-viewer") ?? false;
 
+  const tableRef = React.useRef<HTMLTableElement | null>(null);
+
+  // Why use a ref to set max-height on the wrapper?
+  // - position: sticky only works when the sticky element's nearest scrollable
+  //   ancestor is its immediate container. If max-height/overflow are applied
+  //   on a grandparent, sticky table headers (th) will not stick.
+  // - We keep the scroll wrapper colocated with the base Table component, but
+  //   derive the scroll boundary from maxHeight here to avoid coupling UI base
+  //   components to data-table specifics or expanding their API surface.
+  // - Setting styles on the table's direct wrapper ensures the header sticks
+  //   reliably across browsers without changing upstream components.
+  React.useEffect(() => {
+    if (!tableRef.current) {
+      return;
+    }
+    const wrapper = tableRef.current.parentElement as HTMLDivElement | null;
+    if (!wrapper) {
+      return;
+    }
+    if (maxHeight) {
+      wrapper.style.maxHeight = `${maxHeight}px`;
+      // Ensure wrapper scrolls
+      if (!wrapper.style.overflow) {
+        wrapper.style.overflow = "auto";
+      }
+    } else {
+      wrapper.style.removeProperty("max-height");
+    }
+  }, [maxHeight]);
+
   return (
     <div className={cn(wrapperClassName, "flex flex-col space-y-1")}>
       <FilterPills filters={filters} table={table} />
@@ -263,11 +295,11 @@ const DataTableInternal = <TData,>({
             reloading={reloading}
           />
         )}
-        <Table className="relative">
+        <Table className="relative" ref={tableRef}>
           {showLoadingBar && (
             <div className="absolute top-0 left-0 h-[3px] w-1/2 bg-primary animate-slide" />
           )}
-          {renderTableHeader(table)}
+          {renderTableHeader(table, Boolean(maxHeight))}
           <CellSelectionProvider>
             <DataTableBody
               table={table}

package/src/components/data-table/date-popover.tsx

@@ -124,7 +124,7 @@ const RelativeTime = ({ date }: { date: Date }) => {
   const differenceInSeconds = (currentTime.getTime() - date.getTime()) / 1000;
 
   // Define time units with their thresholds and conversion factors
-  const timeUnits: Array<[number, number, string]> = [
+  const timeUnits: [number, number, string][] = [
     [60, 1, "second"], // Less than 60 seconds
     [60, 60, "minute"], // Less than 60 minutes
     [24, 3600, "hour"], // Less than 24 hours

package/src/components/data-table/download-actions.tsx

@@ -167,7 +167,7 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
   );
 };
 
-function fetchJson(url: string): Promise<Array<Record<string, unknown>>> {
+function fetchJson(url: string): Promise<Record<string, unknown>[]> {
   return fetch(url).then((res) => {
     if (!res.ok) {
       throw new Error(res.statusText);

package/src/components/data-table/range-focus/__tests__/utils.test.ts

@@ -20,17 +20,17 @@ function createMockCell(id: string, value: unknown): Cell<unknown, unknown> {
 function createMockColumn(id: string): Column<unknown> {
   return {
     id: id,
-    getIndex: () => Number.parseInt(id),
+    getIndex: () => Number.parseInt(id, 10),
   } as unknown as Column<unknown>;
 }
 
 function createMockRow(
   id: string,
-  cells: Array<Cell<unknown, unknown>>,
+  cells: Cell<unknown, unknown>[],
 ): Row<unknown> {
   return {
     id,
-    index: Number.parseInt(id),
+    index: Number.parseInt(id, 10),
     getAllCells: () => cells,
     original: {},
     depth: 0,
@@ -43,8 +43,8 @@ function createMockRow(
 }
 
 function createMockTable(
-  rows: Array<Row<unknown>>,
-  columns: Array<Column<unknown>>,
+  rows: Row<unknown>[],
+  columns: Column<unknown>[],
 ): Table<unknown> {
   return {
     getRow: (id: string) => rows.find((row) => row.id === id),