@marimo-team/islands 0.21.2-dev9 → 0.21.2-dev90

package/dist/{vega-loader.browser-CQ-lnUkI.js → vega-loader.browser-DnqN5nbz.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-BAc-kQ3q.js";
-import { i as formatSpecifier, n as formatPrefix, r as locale_default, t as format$1 } from "./defaultLocale-Bklbu-Tp.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-CfQ4kBaV.js";
+import { a as tickStep, n as precisionPrefix_default, r as precisionFixed_default, s as bisector, t as precisionRound_default } from "./precisionRound-C-DW449D.js";
+import { i as formatSpecifier, n as formatPrefix, r as locale_default, t as format$1 } from "./defaultLocale-I3_GfJ4U.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-Dr6Bz4JK.js";
 function accessor(o, P, F) {
   return o.fields = P || [], o.fname = F, o;
 }

package/dist/velocity-Di7l-yhe.js

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

package/dist/verilog-Bzi-S3g2.js

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

package/dist/vhdl-B0ZZITaW.js

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

package/dist/webidl-0sviiRcN.js

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

package/dist/xquery-B4qMVWaB.js

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

package/dist/{xychartDiagram-PRI3JC2R-XO8FiQjU.js → xychartDiagram-PRI3JC2R-BbEInSqY.js}

@@ -1,17 +1,17 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-import "./purify.es-DGenX2XH.js";
-import { t as linear } from "./linear-DIp6l9sg.js";
-import { n as ordinal } from "./ordinal-Dcvf4J1m.js";
-import { t as range } from "./range-BToS7LsA.js";
-import "./defaultLocale-Bklbu-Tp.js";
-import { t as line_default } from "./line-C1k1rG3Z.js";
-import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-BRT9vd1R.js";
-import { n as initRange } from "./init-Ci8VD8ZH.js";
-import { i as log, r as __name } from "./src-CHUphWwL.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-7QYXAAhe.js";
-import { t as selectSvgElement } from "./chunk-EXTU4WIE-BRFl4iNd.js";
-import "./dist-Bymy0kEH.js";
-import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-BkrY9SdL.js";
+import "./purify.es-Co_dANLh.js";
+import { t as linear } from "./linear-DZ8_CGCd.js";
+import { n as ordinal } from "./ordinal-B4zYMadD.js";
+import { t as range } from "./range-Bn3no95s.js";
+import "./defaultLocale-I3_GfJ4U.js";
+import { t as line_default } from "./line-BWRi3U3S.js";
+import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-CGlk8NH-.js";
+import { n as initRange } from "./init-D-g0ONX1.js";
+import { i as log, r as __name } from "./src-BY0BGg6V.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-NPoevJcI.js";
+import { t as selectSvgElement } from "./chunk-EXTU4WIE-BtA6WdD4.js";
+import "./dist-C89sHDXk.js";
+import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-BeXqAsc9.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-Jt25Fuv8.js

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

package/dist/z80-CrcbYzmp.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.21.2-dev9",
+  "version": "0.21.2-dev90",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -21,7 +21,7 @@
     "./unstable_internal/*": "./src/*"
   },
   "dependencies": {
-    "@ai-sdk/react": "^2.0.125",
+    "@ai-sdk/react": "^3.0.131",
     "@anywidget/types": "^0.2.0",
     "@codemirror/autocomplete": "^6.20.1",
     "@codemirror/commands": "^6.10.2",
@@ -96,6 +96,7 @@
     "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.23",
     "@textea/json-viewer": "^4.0.1",
     "@types/humanize-duration": "^3.27.4",
     "@types/js-cookie": "^3.0.6",
@@ -114,7 +115,7 @@
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^5.5.0",
     "@zed-industries/agent-client-protocol": "^0.4.5",
-    "ai": "^5.0.123",
+    "ai": "^6.0.129",
     "ansi_up": "^6.0.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/src/__mocks__/notebook.ts

@@ -22,16 +22,16 @@ export const MockNotebook = {
   },
 
   notebookState: (opts?: {
-    cellData: Record<string, Partial<CellData>>;
-    cellRuntime?: Record<string, Partial<CellRuntimeState>>;
+    cellData: Record<CellId, Partial<CellData>>;
+    cellRuntime?: Record<CellId, Partial<CellRuntimeState>>;
   }): NotebookState => {
-    const cellData = opts?.cellData || {};
-    const cellRuntime = opts?.cellRuntime || {};
+    const cellData = opts?.cellData ?? {};
+    const cellRuntime = opts?.cellRuntime ?? {};
     return {
-      cellData: Objects.mapValues(cellData, (data, cellId) => ({
-        id: cellId as CellId,
+      cellData: Objects.mapValues(cellData, (data, cid) => ({
+        id: cid,
         code: "",
-        name: `cell-${cellId}`,
+        name: `cell-${cid}`,
         config: {
           hide_code: false,
           disabled: false,
@@ -45,8 +45,8 @@ export const MockNotebook = {
         ...data,
       })),
       cellIds: MultiColumn.from([Object.keys(cellData) as CellId[]]),
-      cellRuntime: Objects.mapValues(cellData, (_data, cellId) =>
-        createCellRuntimeState({ ...cellRuntime[cellId] }),
+      cellRuntime: Objects.mapValues(cellData, (_data, cid) =>
+        createCellRuntimeState({ ...cellRuntime[cid] }),
       ),
       cellHandles: Objects.mapValues(cellData, (_data) => createRef()),
       cellLogs: [],

package/src/__mocks__/requests.ts

@@ -17,7 +17,7 @@ export const MockRequestClient = {
       sendModelValue: vi.fn().mockResolvedValue({}),
       sendRename: vi.fn().mockResolvedValue({}),
       sendRestart: vi.fn().mockResolvedValue({}),
-      syncCellIds: vi.fn().mockResolvedValue({}),
+      sendDocumentTransaction: vi.fn().mockResolvedValue({}),
       sendSave: vi.fn().mockResolvedValue({}),
       sendCopy: vi.fn().mockResolvedValue({}),
       sendStdin: vi.fn().mockResolvedValue({}),
@@ -39,6 +39,7 @@ export const MockRequestClient = {
       previewDatasetColumn: vi.fn().mockResolvedValue({}),
       previewSQLTable: vi.fn().mockResolvedValue({}),
       previewSQLTableList: vi.fn().mockResolvedValue({ tables: [] }),
+      previewSQLSchemaList: vi.fn().mockResolvedValue({ schemas: [] }),
       previewDataSourceConnection: vi.fn().mockResolvedValue({}),
       validateSQL: vi.fn().mockResolvedValue({}),
       openFile: vi.fn().mockResolvedValue({}),

package/src/__tests__/branded.ts

@@ -0,0 +1,20 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * Test-only helpers for constructing branded ID types from plain strings.
+ *
+ * In production code, branded types flow from the API (via codegen) or
+ * from designated creation points (e.g. CellId.create()). Tests need to
+ * construct these from string literals, which requires a cast. These
+ * helpers centralise that cast so test files don't scatter `as CellId`
+ * everywhere.
+ */
+
+import type { CellId, UIElementId } from "@/core/cells/ids";
+import type { RequestId } from "@/core/network/DeferredRequestRegistry";
+import type { VariableName } from "@/core/variables/types";
+
+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;

package/src/__tests__/setup.ts

@@ -5,6 +5,21 @@ import { afterEach, beforeEach, vi } from "vitest";
 import "@testing-library/jest-dom/vitest";
 import "blob-polyfill";
 
+// mock implementation because jsdom doesn't support ResizeObserver
+// if we need to test ResizeObserver functionality
+// we can use a library like "resize-observer-polyfill"
+globalThis.ResizeObserver ??= class {
+  observe(_target: Element) {
+    /* noop */
+  }
+  unobserve(_target: Element) {
+    /* noop */
+  }
+  disconnect() {
+    /* noop */
+  }
+} as never;
+
 // Global setup for all tests
 beforeEach(() => {
   // Reset all mocks before each test

package/src/components/app-config/__tests__/get-dirty-values.test.ts

@@ -2,7 +2,7 @@
 
 import { describe, expect, test } from "vitest";
 import type { UserConfig } from "@/core/config/config-schema";
-import { applyManualInjections, getDirtyValues } from "../user-config-form";
+import { applyManualInjections, getDirtyValues } from "../get-dirty-values";
 
 describe("getDirtyValues", () => {
   test("extracts only dirty fields", () => {

package/src/components/app-config/get-dirty-values.ts

@@ -0,0 +1,100 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { FieldPath, FieldValues } from "react-hook-form";
+import type { UserConfig } from "@/core/config/config-schema";
+
+/**
+ * Extract only the values that have been modified (dirty) from form state.
+ * This prevents sending unchanged fields that could overwrite backend values.
+ */
+export function getDirtyValues<T extends FieldValues>(
+  values: T,
+  dirtyFields: Partial<Record<keyof T, unknown>>,
+): Partial<T> {
+  const result: Partial<T> = {};
+  for (const key of Object.keys(dirtyFields) as (keyof T)[]) {
+    const dirty = dirtyFields[key];
+    const value = values[key];
+
+    // Skip if the value no longer exists (e.g., deleted from a record)
+    if (value === undefined) {
+      continue;
+    }
+
+    if (dirty === true) {
+      result[key] = value;
+    } else if (typeof dirty === "object" && dirty !== null) {
+      // Nested object - recurse
+      const nested = getDirtyValues(
+        value as FieldValues,
+        dirty as Partial<Record<string, unknown>>,
+      );
+      if (Object.keys(nested).length > 0) {
+        result[key] = nested as T[keyof T];
+      }
+    }
+  }
+  return result;
+}
+
+type ManualInjector = (
+  values: UserConfig,
+  dirtyValues: Partial<UserConfig>,
+) => void;
+
+const modelsAiInjection = (
+  values: UserConfig,
+  dirtyValues: Partial<UserConfig>,
+) => {
+  dirtyValues.ai = {
+    ...dirtyValues.ai,
+    models: {
+      ...dirtyValues.ai?.models,
+      displayed_models: values.ai?.models?.displayed_models ?? [],
+      custom_models: values.ai?.models?.custom_models ?? [],
+    },
+  };
+};
+
+// Some fields (like AI model lists) have empty arrays as default values.
+// If a user explicitly clears them, RHF won't mark them dirty, so we use
+// touchedFields to force-include those values in the payload.
+const MANUAL_INJECT_ENTRIES = [
+  ["ai.models.displayed_models", modelsAiInjection],
+  ["ai.models.custom_models", modelsAiInjection],
+] as const satisfies readonly (readonly [
+  FieldPath<UserConfig>,
+  ManualInjector,
+])[];
+
+const MANUAL_INJECT_FIELDS = new Map(MANUAL_INJECT_ENTRIES);
+
+const isTouchedPath = (
+  touched: unknown,
+  path: FieldPath<UserConfig>,
+): boolean => {
+  if (!touched) {
+    return false;
+  }
+  let current: unknown = touched;
+  for (const segment of path.split(".")) {
+    if (typeof current !== "object" || current === null) {
+      return false;
+    }
+    current = (current as Record<string, unknown>)[segment];
+  }
+  return current === true;
+};
+
+export const applyManualInjections = (opts: {
+  values: UserConfig;
+  dirtyValues: Partial<UserConfig>;
+  touchedFields: unknown;
+}) => {
+  const { values, dirtyValues, touchedFields } = opts;
+  for (const [fieldPath, injector] of MANUAL_INJECT_FIELDS) {
+    if (isTouchedPath(touchedFields, fieldPath)) {
+      injector(values, dirtyValues);
+    }
+  }
+};

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

@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { merge } from "lodash-es";
 import {
   AlertTriangleIcon,
   BrainIcon,
@@ -14,7 +15,6 @@ import {
 } from "lucide-react";
 import React, { useId, useRef } from "react";
 import { useLocale } from "react-aria";
-import type { FieldPath, FieldValues } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import type z from "zod";
 import { Button } from "@/components/ui/button";
@@ -58,105 +58,10 @@ import { Tooltip } from "../ui/tooltip";
 import { AiConfig } from "./ai-config";
 import { formItemClasses, SettingGroup } from "./common";
 import { DataForm } from "./data-form";
+import { applyManualInjections, getDirtyValues } from "./get-dirty-values";
 import { IsOverridden } from "./is-overridden";
 import { OptionalFeatures } from "./optional-features";
 
-/**
- * Extract only the values that have been modified (dirty) from form state.
- * This prevents sending unchanged fields that could overwrite backend values.
- */
-export function getDirtyValues<T extends FieldValues>(
-  values: T,
-  dirtyFields: Partial<Record<keyof T, unknown>>,
-): Partial<T> {
-  const result: Partial<T> = {};
-  for (const key of Object.keys(dirtyFields) as (keyof T)[]) {
-    const dirty = dirtyFields[key];
-    const value = values[key];
-
-    // Skip if the value no longer exists (e.g., deleted from a record)
-    if (value === undefined) {
-      continue;
-    }
-
-    if (dirty === true) {
-      result[key] = value;
-    } else if (typeof dirty === "object" && dirty !== null) {
-      // Nested object - recurse
-      const nested = getDirtyValues(
-        value as FieldValues,
-        dirty as Partial<Record<string, unknown>>,
-      );
-      if (Object.keys(nested).length > 0) {
-        result[key] = nested as T[keyof T];
-      }
-    }
-  }
-  return result;
-}
-
-type ManualInjector = (
-  values: UserConfig,
-  dirtyValues: Partial<UserConfig>,
-) => void;
-
-const modelsAiInjection = (
-  values: UserConfig,
-  dirtyValues: Partial<UserConfig>,
-) => {
-  dirtyValues.ai = {
-    ...dirtyValues.ai,
-    models: {
-      ...dirtyValues.ai?.models,
-      displayed_models: values.ai?.models?.displayed_models ?? [],
-      custom_models: values.ai?.models?.custom_models ?? [],
-    },
-  };
-};
-
-// Some fields (like AI model lists) have empty arrays as default values.
-// If a user explicitly clears them, RHF won't mark them dirty, so we use
-// touchedFields to force-include those values in the payload.
-const MANUAL_INJECT_ENTRIES = [
-  ["ai.models.displayed_models", modelsAiInjection],
-  ["ai.models.custom_models", modelsAiInjection],
-] as const satisfies readonly (readonly [
-  FieldPath<UserConfig>,
-  ManualInjector,
-])[];
-
-const MANUAL_INJECT_FIELDS = new Map(MANUAL_INJECT_ENTRIES);
-
-const isTouchedPath = (
-  touched: unknown,
-  path: FieldPath<UserConfig>,
-): boolean => {
-  if (!touched) {
-    return false;
-  }
-  let current: unknown = touched;
-  for (const segment of path.split(".")) {
-    if (typeof current !== "object" || current === null) {
-      return false;
-    }
-    current = (current as Record<string, unknown>)[segment];
-  }
-  return current === true;
-};
-
-export const applyManualInjections = (opts: {
-  values: UserConfig;
-  dirtyValues: Partial<UserConfig>;
-  touchedFields: unknown;
-}) => {
-  const { values, dirtyValues, touchedFields } = opts;
-  for (const [fieldPath, injector] of MANUAL_INJECT_FIELDS) {
-    if (isTouchedPath(touchedFields, fieldPath)) {
-      injector(values, dirtyValues);
-    }
-  }
-};
-
 const categories = [
   {
     id: "editor",
@@ -287,10 +192,10 @@ export const UserConfigForm: React.FC = () => {
       dirtyValues.ai = setAiModels(values.ai, dirtyValues.ai);
     }
 
-    await saveUserConfig({ config: dirtyValues }).then(() => {
-      // Update local state with form values
-      setConfig((prev) => ({ ...prev, ...values }));
-    });
+    await saveUserConfig({ config: dirtyValues });
+    // Only apply the changed keys; this avoids stale request responses
+    // overwriting newer config changes.
+    setConfig((prev) => merge({}, prev, dirtyValues));
   };
   const onSubmit = useDebouncedCallback(onSubmitNotDebounced, FORM_DEBOUNCE);
 

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

@@ -1,7 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { components } from "@marimo-team/marimo-api";
-import type { FileUIPart, ToolUIPart, UIMessage } from "ai";
+import type {
+  ChatAddToolOutputFunction,
+  FileUIPart,
+  ToolUIPart,
+  UIMessage,
+} from "ai";
 import { useState } from "react";
 import useEvent from "react-use-event-hook";
 import type { ProviderId } from "@/core/ai/ids/ids";
@@ -111,12 +116,6 @@ export async function buildCompletionRequestBody(
   };
 }
 
-interface AddToolOutput {
-  tool: string;
-  toolCallId: string;
-  output: unknown;
-}
-
 export async function handleToolCall({
   invokeAiTool,
   addToolOutput, // Important that we don't await addToolOutput to prevent potential deadlocks
@@ -124,7 +123,7 @@ export async function handleToolCall({
   toolContext,
 }: {
   invokeAiTool: (request: InvokeAiToolRequest) => Promise<InvokeAiToolResponse>;
-  addToolOutput: (output: AddToolOutput) => Promise<void>;
+  addToolOutput: ChatAddToolOutputFunction<UIMessage>;
   toolCall: {
     toolName: string;
     toolCallId: string;

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

@@ -9,6 +9,7 @@ import {
   SearchIcon,
 } from "lucide-react";
 import React from "react";
+import { useLocale } from "react-aria";
 import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
 import type { PanelType } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
@@ -16,7 +17,7 @@ import { Button } from "../ui/button";
 import { Tooltip } from "../ui/tooltip";
 import { toast } from "../ui/use-toast";
 import { type DownloadActionProps, DownloadAs } from "./download-actions";
-import { DataTablePagination } from "./pagination";
+import { DataTablePagination, prettifyRowColumnCount } from "./pagination";
 import type { DataTableSelection } from "./types";
 
 interface TableActionsProps<TData> {
@@ -64,6 +65,7 @@ export const TableActions = <TData,>({
   isPanelOpen,
   tableLoading,
 }: TableActionsProps<TData>) => {
+  const { locale } = useLocale();
   const handleSelectAllRows = (value: boolean) => {
     if (!onRowSelectionChange) {
       return;
@@ -173,7 +175,7 @@ export const TableActions = <TData,>({
         </>
       )}
 
-      {pagination && (
+      {pagination ? (
         <DataTablePagination
           totalColumns={totalColumns}
           selection={selection}
@@ -182,6 +184,10 @@ export const TableActions = <TData,>({
           tableLoading={tableLoading}
           showPageSizeSelector={showPageSizeSelector}
         />
+      ) : (
+        <span className="text-xs text-muted-foreground px-2">
+          {prettifyRowColumnCount(table.getRowCount(), totalColumns, locale)}
+        </span>
       )}
       <div className="ml-auto">
         {downloadAs && (