@marimo-team/islands 0.24.3-dev2 → 0.24.3-dev22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.24.3-dev2",
+  "version": "0.24.3-dev22",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -21,7 +21,7 @@
     "./unstable_internal/*": "./src/*"
   },
   "dependencies": {
-    "@ai-sdk/react": "^4.0.40",
+    "@ai-sdk/react": "^4.0.90",
     "@anywidget/types": "^0.4.0",
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/commands": "^6.11.0",
@@ -38,7 +38,7 @@
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.43.9",
     "@dagrejs/dagre": "^1.1.8",
-    "@date-fns/tz": "^1.4.1",
+    "@date-fns/tz": "^1.5.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -46,9 +46,9 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@glideapps/glide-data-grid": "6.0.4-alpha24",
-    "@hookform/resolvers": "^5.2.2",
+    "@hookform/resolvers": "^5.9.1",
     "@img-comparison-slider/react": "^8.0.2",
-    "@internationalized/date": "^3.10.1",
+    "@internationalized/date": "^3.12.3",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
     "@lezer/lr": "^1.4.10",
@@ -67,13 +67,13 @@
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "~1.3.2",
     "@radix-ui/react-use-controllable-state": "~1.2.2",
-    "@replit/codemirror-vim": "^6.3.0",
+    "@replit/codemirror-vim": "^6.4.0",
     "@revealjs/react": "^0.2.1",
-    "@streamdown/math": "^1.0.1",
-    "@tailwindcss/postcss": "^4.3.0",
-    "@tailwindcss/typography": "^0.5.19",
+    "@streamdown/math": "^1.0.2",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@tailwindcss/typography": "^0.5.20",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.13.23",
+    "@tanstack/react-virtual": "^3.14.10",
     "@textea/json-viewer": "^4.0.1",
     "@types/humanize-duration": "^3.27.4",
     "@types/js-cookie": "^3.0.6",
@@ -81,7 +81,7 @@
     "@types/react-grid-layout": "^1.3.6",
     "@uidotdev/usehooks": "^2.4.1",
     "@uiw/codemirror-extensions-langs": "^4.25.11",
-    "@uiw/react-codemirror": "4.25.4",
+    "@uiw/react-codemirror": "4.25.11",
     "@uwdata/flechette": "^1.1.2",
     "@valtown/codemirror-codeium": "^1.1.1",
     "@xterm/addon-attach": "^0.12.0",
@@ -92,45 +92,45 @@
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^5.5.0",
     "@zed-industries/agent-client-protocol": "^0.4.5",
-    "ai": "^7.0.37",
+    "ai": "^7.0.87",
     "ansi_up": "^6.0.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "compassql": "^0.21.2",
-    "cssnano": "^7.1.2",
-    "date-fns": "^4.1.0",
+    "cssnano": "^7.1.9",
+    "date-fns": "^4.4.0",
     "dequal": "^2.0.3",
     "dnd-core": "^16.0.1",
-    "dompurify": "^3.3.1",
+    "dompurify": "^3.4.14",
     "htm": "^3.1.1",
-    "html-react-parser": "^5.2.14",
+    "html-react-parser": "^5.2.17",
     "html-to-image": "1.11.13",
-    "humanize-duration": "^3.33.2",
+    "humanize-duration": "^3.34.1",
     "iconify-icon": "^2.3.0",
-    "jotai": "^2.17.0",
-    "jotai-scope": "^0.10.0",
-    "js-cookie": "^3.0.5",
-    "katex": "^0.16.28",
-    "lodash-es": "^4.17.22",
+    "jotai": "^2.20.3",
+    "jotai-scope": "^0.12.2",
+    "js-cookie": "^3.0.8",
+    "katex": "^0.18.5",
+    "lodash-es": "^4.18.1",
     "loro-codemirror": "^0.3.3",
-    "loro-crdt": "^1.10.5",
-    "lucide-react": "^0.563.0",
+    "loro-crdt": "^1.15.1",
+    "lucide-react": "^0.577.0",
     "lz-string": "^1.5.0",
     "marked": "^15.0.12",
-    "mermaid": "^11.12.3",
-    "partysocket": "1.1.13",
-    "path-to-regexp": "^8.4.0",
-    "plotly.js": "^3.3.1",
+    "mermaid": "^11.17.2",
+    "partysocket": "1.3.0",
+    "path-to-regexp": "^8.4.2",
+    "plotly.js": "^3.7.0",
     "pyodide": "314.0.0",
     "radix-ui": "1.4.3",
-    "react-arborist": "^3.4.3",
+    "react-arborist": "^3.16.0",
     "react-aria": "3.47.0",
     "react-aria-components": "1.16.0",
-    "react-codemirror-merge": "4.25.4",
+    "react-codemirror-merge": "4.25.11",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dropzone": "^14.4.0",
+    "react-dropzone": "^14.4.1",
     "react-error-boundary": "^5.0.0",
     "react-grid-layout": "^1.5.3",
     "react-hook-form": "7.54.2",
@@ -138,31 +138,31 @@
     "react-resizable-panels": "2.1.9",
     "react-use-event-hook": "^0.9.6",
     "react-vega": "^8.0.0",
-    "react-virtuoso": "^4.18.1",
+    "react-virtuoso": "^4.18.12",
     "reactflow": "^11.11.4",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "reveal.js": "^6.0.0",
+    "reveal.js": "^6.0.1",
     "rpc-anywhere": "^1.7.0",
-    "sql-formatter": "^15.7.0",
-    "streamdown": "^2.1.0",
+    "sql-formatter": "^15.8.2",
+    "streamdown": "^2.6.0",
     "string-dedent": "^3.0.2",
-    "swiper": "^12.0.0",
-    "tailwind-merge": "^2.6.0",
+    "swiper": "^12.2.0",
+    "tailwind-merge": "2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "thememirror": "^2.0.1",
     "timestring": "^7.0.0",
     "typescript-memoize": "^1.1.1",
     "use-acp": "0.2.6",
     "use-resize-observer": "^9.1.0",
-    "vega-lite": "6.4.2",
-    "vega-loader": "^5.1.0",
-    "vega-parser": "^7.1.0",
+    "vega-lite": "6.4.3",
+    "vega-loader": "^5.1.3",
+    "vega-parser": "^7.1.3",
     "vega-tooltip": "^1.1.0",
     "vscode-jsonrpc": "^8.2.1",
-    "vscode-languageserver-protocol": "^3.17.5",
+    "vscode-languageserver-protocol": "^3.18.3",
     "web-vitals": "^4.2.4",
-    "zod": "^4.3.6"
+    "zod": "^4.5.4"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -203,33 +203,33 @@
     "@types/dompurify": "^3.2.0",
     "@types/katex": "^0.16.8",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.10.9",
-    "@types/plotly.js": "^2.33.4",
-    "@types/react": "^19.2.10",
-    "@types/react-dom": "^19.2.3",
+    "@types/node": "^24.13.3",
+    "@types/plotly.js": "^2.35.16",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
     "@types/timestring": "^6.0.5",
     "@vitejs/plugin-react": "^6.1.0",
     "@vitest/coverage-v8": "4.1.11",
     "blob-polyfill": "^7.0.20220408",
     "cross-env": "^7.0.3",
     "jsdom": "^24.1.3",
-    "msw": "^2.12.7",
+    "msw": "^2.15.0",
     "npm-run-all2": "^6.2.6",
     "oxfmt": "^0.64.0",
     "oxlint": "^1.79.0",
     "oxc-transform-react": "0.145.0",
     "postcss": "^8.5.26",
-    "postcss-prefix-selector": "^2.1.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "postcss-prefix-selector": "^2.2.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "storybook": "^10.5.10",
     "stylelint": "^16.26.1",
     "stylelint-config-standard": "^36.0.1",
     "tailwindcss": "^4.3.3",
-    "vega-typings": "^2.1.0",
+    "vega-typings": "^2.3.0",
     "vite": "^8.2.2",
     "vite-plugin-wasm": "^3.6.0",
     "vitest": "^4.1.11",
-    "yaml": "^2.8.3"
+    "yaml": "^2.9.0"
   }
 }

package/src/__mocks__/requests.ts

@@ -136,8 +136,13 @@ export const MockRequestClient = {
       updateCellOutputs: vi.fn().mockResolvedValue({}),
       addPackage: vi.fn().mockResolvedValue({}),
       removePackage: vi.fn().mockResolvedValue({}),
-      getPackageList: vi.fn().mockResolvedValue({ packages: [] }),
-      getDependencyTree: vi.fn().mockResolvedValue({}),
+      getPackageList: vi.fn().mockResolvedValue({
+        packages: [],
+      }),
+      getDependencyTree: vi.fn().mockResolvedValue({
+        tree: null,
+        context: { kind: "package-manager", name: "pip" },
+      }),
       listSecretKeys: vi.fn().mockResolvedValue({ keys: [] }),
       writeSecret: vi.fn().mockResolvedValue({}),
       invokeAiTool: vi.fn().mockResolvedValue({}),

package/src/__tests__/__snapshots__/CellStatus.test.tsx.snap

@@ -39,14 +39,14 @@ exports[`CellStatusComponent > renders disabled and stale state 1`] = `
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M4.929 4.929 19.07 19.071"
-        />
         <circle
           cx="12"
           cy="12"
           r="10"
         />
+        <path
+          d="M4.929 4.929 19.07 19.071"
+        />
       </svg>
       <div
         class="second-icon absolute bottom-[-2px] right-[-2px] rounded-full"
@@ -104,14 +104,14 @@ exports[`CellStatusComponent > renders disabled state 1`] = `
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M4.929 4.929 19.07 19.071"
-      />
       <circle
         cx="12"
         cy="12"
         r="10"
       />
+      <path
+        d="M4.929 4.929 19.07 19.071"
+      />
     </svg>
   </div>
 </div>
@@ -175,14 +175,14 @@ exports[`CellStatusComponent > renders disabled transitively state 1`] = `
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M4.929 4.929 19.07 19.071"
-          />
           <circle
             cx="12"
             cy="12"
             r="10"
           />
+          <path
+            d="M4.929 4.929 19.07 19.071"
+          />
         </svg>
       </div>
     </div>
@@ -403,14 +403,14 @@ exports[`CellStatusComponent > renders stale and disabled transitively state 1`]
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M4.929 4.929 19.07 19.071"
-          />
           <circle
             cx="12"
             cy="12"
             r="10"
           />
+          <path
+            d="M4.929 4.929 19.07 19.071"
+          />
         </svg>
       </div>
     </div>

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

@@ -10,7 +10,7 @@ import {
   EyeIcon,
   EyeOffIcon,
 } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useLocale } from "react-aria";
 import {
   AddDataframeChart,
@@ -98,11 +98,7 @@ export function ColumnExplorerPanel<TData>({
     hiddenColumns: hiddenColumnCount,
   } = getColumnCountForDisplay(table, totalColumns);
   const { visible: visibleColumnCount } = getUserColumnVisibilityCounts(table);
-  const columnVisibility = table.getState().columnVisibility;
-  const showOnlyColumnState = useMemo(
-    () => getShowOnlyColumnState(table),
-    [table, columnVisibility],
-  );
+  const showOnlyColumnState = getShowOnlyColumnState(table);
 
   const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
     numRows: totalRows,

package/src/components/data-table/column-visibility-dropdown.tsx

@@ -215,6 +215,11 @@ export const ColumnVisibilityDropdown = <TData,>({
                 index === list.pinnedCount &&
                 list.pinnedCount > 0 &&
                 list.pinnedCount < list.visibleOptions.length;
+              const label = (
+                <span className="truncate" title={option.label}>
+                  {option.label}
+                </span>
+              );
               return (
                 <React.Fragment key={option.value}>
                   {isSectionBoundary && <CommandSeparator />}
@@ -225,15 +230,16 @@ export const ColumnVisibilityDropdown = <TData,>({
                     className="flex items-center gap-1.5 cursor-pointer"
                   >
                     {dataType === undefined ? (
-                      <span>{option.label}</span>
+                      label
                     ) : (
                       <ColumnName
-                        columnName={option.label}
+                        className="min-w-0"
+                        columnName={label}
                         dataType={dataType}
                       />
                     )}
                     {!option.disabled && (
-                      <span className="ml-auto flex items-center gap-0.5">
+                      <span className="ml-auto flex shrink-0 items-center gap-0.5">
                         <ShowOnlyColumnButton
                           table={table}
                           columnIds={[option.value]}

package/src/components/datasources/components.tsx

@@ -101,18 +101,20 @@ export const ColumnPreviewContainer: React.FC<{
 export const ColumnName = ({
   columnName,
   dataType,
+  className,
 }: {
   columnName: React.ReactNode;
   dataType: DataType;
+  className?: string;
 }) => {
   const resolvedDataType = resolveDataType(dataType);
   const Icon = DATA_TYPE_ICON[resolvedDataType];
   const color = getDataTypeColor(resolvedDataType);
 
   return (
-    <div className="flex flex-row items-center gap-1.5">
+    <div className={cn("flex flex-row items-center gap-1.5", className)}>
       <Icon
-        className={`w-4 h-4 p-0.5 rounded-sm stroke-card-foreground ${color}`}
+        className={`w-4 h-4 shrink-0 p-0.5 rounded-sm stroke-card-foreground ${color}`}
       />
       {columnName}
     </div>

package/src/components/editor/chrome/components/feedback-button.tsx

@@ -6,7 +6,7 @@ const Slot = SlotPrimitive.Slot;
 
 import { useAtomValue } from "jotai";
 import { ExternalLinkIcon, TriangleAlertIcon } from "lucide-react";
-import React, { type PropsWithChildren, useMemo, useState } from "react";
+import React, { type PropsWithChildren, useState } from "react";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { Button } from "@/components/ui/button";
@@ -94,8 +94,7 @@ export const FeedbackModal: React.FC<{
   );
 
   const notebook = useAtomValue(notebookAtom);
-  // biome-ignore lint/correctness/useExhaustiveDependencies: recompute when the notebook changes
-  const errors = useMemo(() => getCellErrorEntries(store), [notebook]);
+  const errors = getCellErrorEntries(store);
 
   const cells = notebook.cellIds.inOrderIds.map(
     (cellId) => notebook.cellData[cellId],
@@ -145,10 +144,9 @@ export const FeedbackModal: React.FC<{
     return contents;
   }, [includeCode, notebookSourceAvailable, readCode]);
 
-  const { url: githubIssueUrl, omitted } = useMemo(() => {
-    if (!environment) {
-      return { url: Constants.bugReportUrl, omitted: [] as string[] };
-    }
+  let githubIssueUrl = Constants.bugReportUrl;
+  let omitted: string[] = [];
+  if (environment) {
     const fields: Record<string, string> = {
       env: formatEnvironmentSection(environment),
     };
@@ -158,8 +156,11 @@ export const FeedbackModal: React.FC<{
     if (includeCode && codeRequest.data) {
       fields["reproduction-code"] = formatCodeSection(codeRequest.data);
     }
-    return buildBugReportUrl(Constants.bugReportUrl, fields);
-  }, [environment, errors, includeErrors, includeCode, codeRequest.data]);
+    ({ url: githubIssueUrl, omitted } = buildBugReportUrl(
+      Constants.bugReportUrl,
+      fields,
+    ));
+  }
 
   const omittedLabels = omitted
     .map((field) =>

package/src/components/editor/chrome/panels/__tests__/packages-panel.test.tsx

@@ -0,0 +1,143 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Provider } from "jotai";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { requestClientAtom } from "@/core/network/requests";
+import type {
+  DependencyTreeNode,
+  DependencyTreeResponse,
+} from "@/core/network/types";
+import { store } from "@/core/state/jotai";
+import PackagesPanel from "../packages-panel";
+
+const { openSettings } = vi.hoisted(() => ({
+  openSettings: vi.fn(),
+}));
+
+vi.mock("@/components/app-config/state", () => ({
+  useOpenSettingsToTab: () => ({ handleClick: openSettings }),
+}));
+
+const emptyTree: DependencyTreeNode = {
+  name: "<root>",
+  version: null,
+  tags: [],
+  dependencies: [],
+};
+
+const populatedTree: DependencyTreeNode = {
+  ...emptyTree,
+  dependencies: [
+    {
+      name: "polars",
+      version: "1.44.1",
+      tags: [],
+      dependencies: [
+        {
+          name: "numpy",
+          version: "2.5.2",
+          tags: [{ kind: "dedupe", value: "true" }],
+          dependencies: [],
+        },
+      ],
+    },
+  ],
+};
+
+function renderPanel(
+  context: DependencyTreeResponse["context"],
+  tree: DependencyTreeNode = emptyTree,
+) {
+  const getPackageList = vi.fn().mockResolvedValue({ packages: [] });
+  store.set(
+    requestClientAtom,
+    MockRequestClient.create({
+      getPackageList,
+      getDependencyTree: vi.fn().mockResolvedValue({ tree, context }),
+    }),
+  );
+
+  return {
+    getPackageList,
+    ...render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <PackagesPanel />
+        </TooltipProvider>
+      </Provider>,
+    ),
+  };
+}
+
+describe("PackagesPanel", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it.each(["pixi", "uv"] as const)(
+    "shows the effective %s sandbox backend as a fixed context",
+    async (backend) => {
+      const { getPackageList } = renderPanel({ kind: "sandbox", backend });
+
+      expect(
+        await screen.findByPlaceholderText(
+          `Add packages to ${backend} sandbox...`,
+        ),
+      ).toBeInTheDocument();
+      expect(screen.getByText(`${backend} sandbox`)).toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "Change package manager" }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "List" }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "Tree" }),
+      ).not.toBeInTheDocument();
+      expect(getPackageList).not.toHaveBeenCalled();
+    },
+  );
+
+  it("explains the filtered empty state for a Pixi sandbox", async () => {
+    renderPanel({ kind: "sandbox", backend: "pixi" });
+
+    expect(await screen.findByText("No PyPI dependencies")).toBeInTheDocument();
+    expect(
+      screen.getByText("Conda dependencies are not shown in this panel."),
+    ).toBeInTheDocument();
+  });
+
+  it("labels a dependency whose subtree was already displayed", async () => {
+    renderPanel({ kind: "sandbox", backend: "pixi" }, populatedTree);
+
+    fireEvent.click(await screen.findByRole("treeitem", { name: /polars/ }));
+
+    expect(screen.getByText("already in tree")).toBeInTheDocument();
+    expect(screen.queryByText("cycle")).not.toBeInTheDocument();
+  });
+
+  it("keeps the configured package manager changeable outside a sandbox", async () => {
+    const { getPackageList } = renderPanel({
+      kind: "package-manager",
+      name: "pip",
+    });
+
+    expect(
+      await screen.findByPlaceholderText("Install packages with pip..."),
+    ).toBeInTheDocument();
+    const changeManager = screen.getByRole("button", {
+      name: "Change package manager",
+    });
+
+    fireEvent.click(changeManager);
+
+    expect(openSettings).toHaveBeenCalledWith("packageManagementAndData");
+    expect(screen.getByText("environment")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "List" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Tree" })).toBeInTheDocument();
+    expect(getPackageList).toHaveBeenCalledOnce();
+  });
+});