@marimo-team/islands 0.25.2-dev4 → 0.25.2-dev7

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

@@ -1,10 +1,10 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { g as t, h as n, r } from "./button-DdXAm8iz.js";
+import { g as t, h as n, r } from "./button-B0Xgl-Qn.js";
 import { t as i } from "./react-ofJbxM4x.js";
 import { t as a } from "./compiler-runtime-Cj8ZWiNS.js";
-import { g as o } from "./tooltip-qB8NlSqV.js";
+import { g as o } from "./tooltip-Bi36DgYh.js";
 import { t as s } from "./jsx-runtime-DgDPJV9S.js";
-import { E as c, w as l } from "./useTheme-DzXmYZ5V.js";
+import { E as c, w as l } from "./useTheme-BOw801nZ.js";
 var u = o("calendar", [
 	["path", {
 		d: "M8 2v4",

package/dist/{useTheme-DzXmYZ5V.js → useTheme-BOw801nZ.js}

@@ -1,8 +1,8 @@
 import { a as e, r as t } from "./rolldown-runtime-Cb76FRpK.js";
-import { a as n, g as r, s as i } from "./button-DdXAm8iz.js";
+import { a as n, g as r, s as i } from "./button-B0Xgl-Qn.js";
 import { t as a } from "./react-ofJbxM4x.js";
 import { t as o } from "./compiler-runtime-Cj8ZWiNS.js";
-import { C as s, F as c, L as l, M as u, O as d, P as f, S as p, j as m, v as h } from "./use-restore-focus-D5D9xEjZ.js";
+import { C as s, F as c, L as l, M as u, O as d, P as f, S as p, j as m, v as h } from "./use-restore-focus-ZgG5Br63.js";
 import { l as g, t as _ } from "./_baseMerge-BiGRwuqv.js";
 //#region ../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/mergeWith.js
 var v = g(function(e, t, n, r) {

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

@@ -1,21 +1,21 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { g as t, h as n, m as r, o as i } from "./button-DdXAm8iz.js";
+import { g as t, h as n, m as r, o as i } from "./button-B0Xgl-Qn.js";
 import { t as a } from "./react-ofJbxM4x.js";
 import { t as o } from "./compiler-runtime-Cj8ZWiNS.js";
-import { t as s } from "./tooltip-qB8NlSqV.js";
-import { T as c, c as l } from "./toDate-C67bxMWn.js";
+import { t as s } from "./tooltip-Bi36DgYh.js";
+import { T as c, c as l } from "./toDate-DWVp6uE1.js";
 import { t as u } from "./jsx-runtime-DgDPJV9S.js";
-import { n as d } from "./error-banner-B94dcDmP.js";
+import { n as d } from "./error-banner-DzAmP0AQ.js";
 import { t as f } from "./debounce-C3jyATpc.js";
-import { A as p, n as ee } from "./useTheme-DzXmYZ5V.js";
+import { A as p, n as ee } from "./useTheme-BOw801nZ.js";
 import { c as m } from "./arrays-CN1djC4k.js";
 import { t as te } from "./objects-CzUgoMIF.js";
-import { t as h } from "./useAsyncData-BD6AStMt.js";
-import { a as ne, i as re, n as ie, t as g } from "./formats-Cl_67ghI.js";
+import { t as h } from "./useAsyncData-BD7NLQ3_.js";
+import { a as ne, i as re, n as ie, t as g } from "./formats-Q9gwlLyD.js";
 import { M as ae, n as oe } from "./vega-loader.browser-DNST6uVf.js";
 import { t as se } from "./react-vega-ewj7q_U5.js";
-import { a as ce, n as _ } from "./loader-DEZSzvma.js";
-import { t as le } from "./useDeepCompareMemoize-D_HNdyvI.js";
+import { a as ce, n as _ } from "./loader-C9OUkMrj.js";
+import { t as le } from "./useDeepCompareMemoize-CawMGSRU.js";
 import { t as ue } from "./semaphore-89jsoHtS.js";
 import { t as de } from "./use-vega-container-remeasure-4DwJbPWu.js";
 //#region src/plugins/impl/vega/fix-relative-url.ts

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

@@ -3,7 +3,7 @@ import { t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { $ as r, H as i, K as a, U as o, a as s, b as c, c as l, et as u, f as d, nt as f, tt as p, v as m, w as h, y as g } from "./chunk-DU6HZSFF-1TwWR6gh.js";
 import { t as _ } from "./rough.esm-CtV9AnV1.js";
-import { p as v } from "./mermaid-Dnzoxjt1.js";
+import { p as v } from "./mermaid-Dfvntf3s.js";
 //#region ../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/transparentize.js
 var y = (e, t) => p(e, "a", -t), b = 1e-10;
 function x(e, t) {

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

@@ -2,7 +2,7 @@ import { i as e } from "./chunk-75Z2AOVW-C4AOleKf.js";
 import { n as t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { D as r, H as i, K as a, U as o, a as s, b as c, c as l, v as u, w as d, x as f, y as p } from "./chunk-DU6HZSFF-1TwWR6gh.js";
-import { p as m } from "./mermaid-Dnzoxjt1.js";
+import { p as m } from "./mermaid-Dfvntf3s.js";
 import { n as h } from "./mermaid-parser.core-DxuSfYwJ.js";
 import { t as g } from "./chunk-JWPE2WC7-DJvv1t8U.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/wardleyDiagram-VM6X3IG4.mjs

package/dist/{xychartDiagram-S5SC5T6Z-BYjwjrzE.js → xychartDiagram-S5SC5T6Z-Df8LLnuY.js}

@@ -9,7 +9,7 @@ import { n as s } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { D as c, H as l, K as u, U as d, a as f, b as p, c as m, f as h, v as g, w as _, y as v, z as y } from "./chunk-DU6HZSFF-1TwWR6gh.js";
 import "./chunk-PWAF6VOD-lNxB9k8z.js";
 import { t as b } from "./chunk-GMAD6QVW-vStrMz2P.js";
-import { p as x } from "./mermaid-Dnzoxjt1.js";
+import { p as x } from "./mermaid-Dfvntf3s.js";
 //#region ../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/band.js
 function S() {
 	var e = t().unknown(void 0), r = e.domain, i = e.range, o = 0, s = 1, c, l, u = !1, d = 0, f = 0, p = .5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.2-dev4",
+  "version": "0.25.2-dev7",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/editor/actions/__tests__/useSetOutputsExpanded.test.ts

@@ -0,0 +1,42 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { MockNotebook } from "@/__mocks__/notebook";
+import type { OutputMessage } from "@/core/kernel/messages";
+import { outputExpansionConfigs } from "../useSetOutputsExpanded";
+
+const output: OutputMessage = {
+  channel: "output",
+  mimetype: "text/plain",
+  data: "hello",
+  timestamp: 0,
+};
+
+describe("outputExpansionConfigs", () => {
+  const [withOutput, withoutOutput, expanded, expandedWithoutOutput] =
+    MockNotebook.cellIds();
+  const notebook = MockNotebook.notebookState({
+    cellData: {
+      [withOutput]: {},
+      [withoutOutput]: {},
+      [expanded]: { config: { expand_output: true } },
+      [expandedWithoutOutput]: { config: { expand_output: true } },
+    },
+    cellRuntime: {
+      [withOutput]: { output },
+      [expanded]: { output },
+    },
+  });
+
+  it("expands clamped cells with output and skips cells without output", () => {
+    expect(outputExpansionConfigs(notebook, true)).toEqual({
+      [withOutput]: { expand_output: true },
+    });
+  });
+
+  it("clamps expanded cells with output and skips cells without output", () => {
+    expect(outputExpansionConfigs(notebook, false)).toEqual({
+      [expanded]: { expand_output: false },
+    });
+  });
+});

package/src/components/editor/actions/useNotebookActions.tsx

@@ -7,6 +7,8 @@ import {
   CheckIcon,
   ChevronDownCircleIcon,
   ChevronRightCircleIcon,
+  ChevronsDownUpIcon,
+  ChevronsUpDownIcon,
   ClipboardCopyIcon,
   CodeIcon,
   CommandIcon,
@@ -100,6 +102,7 @@ import type { ActionButton } from "./types";
 import { useCopyNotebook } from "./useCopyNotebook";
 import { useRestartKernel } from "./useRestartKernel";
 import { useSetCodeVisibility } from "./useSetCodeVisibility";
+import { useSetOutputsExpanded } from "./useSetOutputsExpanded";
 
 const NOOP_HANDLER = (event?: Event) => {
   event?.preventDefault();
@@ -118,6 +121,7 @@ export function useNotebookActions({
   const [viewState] = useAtom(viewStateAtom);
   const kioskMode = useAtomValue(kioskModeAtom);
   const setCodeVisibility = useSetCodeVisibility();
+  const setOutputsExpanded = useSetOutputsExpanded();
   const [resolvedConfig] = useResolvedMarimoConfig();
   const capabilities = useAtomValue(capabilitiesAtom);
   const aiEnabled = useAtomValue(aiEnabledAtom);
@@ -596,6 +600,22 @@ export function useNotebookActions({
       handle: () => setCodeVisibility(true, "markdown"),
       redundant: true,
     },
+    {
+      icon: <ChevronsUpDownIcon size={14} strokeWidth={1.5} />,
+      label: "Expand all outputs",
+      hotkey: "global.expandAllOutputs",
+      hidden: viewState.mode !== "edit",
+      handle: () => setOutputsExpanded(true),
+      redundant: true,
+    },
+    {
+      icon: <ChevronsDownUpIcon size={14} strokeWidth={1.5} />,
+      label: "Clamp all outputs",
+      hotkey: "global.clampAllOutputs",
+      hidden: viewState.mode !== "edit",
+      handle: () => setOutputsExpanded(false),
+      redundant: true,
+    },
     {
       icon: <ChevronRightCircleIcon size={14} strokeWidth={1.5} />,
       label: "Collapse all sections",

package/src/components/editor/actions/useSetOutputsExpanded.ts

@@ -0,0 +1,67 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useCallback } from "react";
+import {
+  getNotebook,
+  type NotebookState,
+  useCellActions,
+} from "@/core/cells/cells";
+import type { CellId } from "@/core/cells/ids";
+import { isOutputEmpty } from "@/core/cells/outputs";
+import { useRequestClient } from "@/core/network/requests";
+import type { CellConfig } from "@/core/network/types";
+import { Objects } from "@/utils/objects";
+
+/**
+ * The `expand_output` config changes needed to expand or clamp every output.
+ *
+ * Both actions skip cells without output, so their source isn't annotated
+ * with a config that has no effect.
+ */
+export function outputExpansionConfigs(
+  notebook: NotebookState,
+  expanded: boolean,
+): Record<CellId, Partial<CellConfig>> {
+  const configs: Record<CellId, Partial<CellConfig>> = {};
+  for (const cellId of notebook.cellIds.inOrderIds) {
+    const cell = notebook.cellData[cellId];
+    if (
+      cell === undefined ||
+      (cell.config.expand_output ?? false) === expanded
+    ) {
+      continue;
+    }
+    if (isOutputEmpty(notebook.cellRuntime[cellId]?.output)) {
+      continue;
+    }
+    configs[cellId] = { expand_output: expanded };
+  }
+  return configs;
+}
+
+/**
+ * Hook returning a callback that shows every cell's output in full, or clamps
+ * every output to a fixed height, by setting each cell's `expand_output` config.
+ */
+export const useSetOutputsExpanded = () => {
+  const { updateCellConfig } = useCellActions();
+  const { saveCellConfig } = useRequestClient();
+
+  return useCallback(
+    async (expanded: boolean) => {
+      const newConfigs = outputExpansionConfigs(getNotebook(), expanded);
+
+      const entries = Objects.entries(newConfigs);
+      if (entries.length === 0) {
+        return;
+      }
+
+      await saveCellConfig({ configs: newConfigs });
+
+      for (const [cellId, config] of entries) {
+        updateCellConfig({ cellId, config });
+      }
+    },
+    [updateCellConfig, saveCellConfig],
+  );
+};

package/src/core/edit-app.tsx

@@ -23,6 +23,7 @@ import {
   useRunStaleCells,
 } from "../components/editor/cell/useRunCells";
 import { useSetCodeVisibility } from "../components/editor/actions/useSetCodeVisibility";
+import { useSetOutputsExpanded } from "../components/editor/actions/useSetOutputsExpanded";
 import { CellArray } from "../components/editor/renderers/cell-array";
 import { CellsRenderer } from "../components/editor/renderers/cells-renderer";
 import { useHotkey } from "../hooks/useHotkey";
@@ -115,6 +116,7 @@ export const EditApp: React.FC<AppProps> = ({
   const runAllCells = useRunAllCells();
   const togglePresenting = useTogglePresenting();
   const setCodeVisibility = useSetCodeVisibility();
+  const setOutputsExpanded = useSetOutputsExpanded();
 
   // HOTKEYS
   useHotkey("global.runStale", () => {
@@ -141,6 +143,20 @@ export const EditApp: React.FC<AppProps> = ({
   useHotkey("global.hideAllMarkdownCode", () => {
     setCodeVisibility(true, "markdown");
   });
+  useHotkey(
+    "global.expandAllOutputs",
+    () => {
+      setOutputsExpanded(true);
+    },
+    { disabled: !isEditing },
+  );
+  useHotkey(
+    "global.clampAllOutputs",
+    () => {
+      setOutputsExpanded(false);
+    },
+    { disabled: !isEditing },
+  );
   useHotkey("global.collapseAllSections", () => {
     collapseAllCells();
   });

package/src/core/hotkeys/hotkeys.ts

@@ -389,6 +389,18 @@ const DEFAULT_HOT_KEY = {
     group: "Editing",
     key: NOT_SET,
   },
+  "global.expandAllOutputs": {
+    name: "Expand all outputs",
+    group: "Editing",
+    key: NOT_SET,
+    additionalKeywords: ["show full output", "unclamp"],
+  },
+  "global.clampAllOutputs": {
+    name: "Clamp all outputs",
+    group: "Editing",
+    key: NOT_SET,
+    additionalKeywords: ["collapse outputs", "shrink outputs"],
+  },
   "global.collapseAllSections": {
     name: "Collapse all sections",
     group: "Editing",

package/src/plugins/impl/FileBrowserPlugin.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { type LucideIcon, CornerLeftUp } from "lucide-react";
+import { type LucideIcon, ChevronRightIcon, CornerLeftUp } from "lucide-react";
 import { type JSX, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { z } from "zod";
 import {
@@ -12,7 +12,6 @@ import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
-import { NativeSelect } from "@/components/ui/native-select";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 import { toast } from "@/components/ui/use-toast";
 import { RANDOM_ID_ATTR } from "@/core/dom/ui-element-constants";
@@ -472,12 +471,19 @@ export const FileBrowser = ({
   //
   // Assumes that path contains at least one delimiter, which is true
   // only if this is an absolute path.
-  const { parentDirectories } = getProtocolAndParentDirectories({
+  const { protocol, parentDirectories } = getProtocolAndParentDirectories({
     path,
     delimiter,
     initialPath,
     restrictNavigation,
   });
+  const breadcrumbs = parentDirectories.toReversed().map((dir) => ({
+    path: dir,
+    name:
+      dir === protocol
+        ? protocol
+        : (dir.split(delimiter).findLast(Boolean) ?? dir),
+  }));
 
   const selectionKindLabel =
     selectionMode === "all"
@@ -515,18 +521,42 @@ export const FileBrowser = ({
     <div>
       {error && <Banner kind="danger">{error.message}</Banner>}
       {renderHeader()}
-      <NativeSelect
-        className="mt-2 w-full"
-        placeholder={path}
-        value={path}
-        onChange={(e) => setNewPath(e.target.value)}
-      >
-        {parentDirectories.map((dir) => (
-          <option value={dir} key={dir}>
-            {dir}
-          </option>
-        ))}
-      </NativeSelect>
+      <nav aria-label="Current directory" className="mt-2">
+        <ol className="flex flex-wrap items-center gap-0.5 text-sm">
+          {breadcrumbs.map((crumb, index) => {
+            const isCurrent = index === breadcrumbs.length - 1;
+            return (
+              <li key={crumb.path} className="flex items-center gap-0.5">
+                {index > 0 && (
+                  <ChevronRightIcon
+                    size={14}
+                    className="text-muted-foreground shrink-0"
+                    aria-hidden={true}
+                  />
+                )}
+                <button
+                  type="button"
+                  title={crumb.path}
+                  aria-current={isCurrent ? "page" : undefined}
+                  onClick={() => {
+                    if (!isCurrent) {
+                      setNewPath(crumb.path);
+                    }
+                  }}
+                  className={cn(
+                    "rounded px-1 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
+                    isCurrent
+                      ? "font-medium cursor-default"
+                      : "text-muted-foreground hover:bg-accent hover:text-foreground",
+                  )}
+                >
+                  {crumb.name}
+                </button>
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
 
       {data && typeof data.total_count === "number" && (
         <div className="text-xs text-muted-foreground mt-1 px-1">

package/src/plugins/impl/__tests__/FileBrowserPlugin.test.tsx

@@ -1,6 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
 import { beforeAll, describe, expect, it, vi } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
 import { initialModeAtom } from "@/core/mode";
@@ -187,7 +193,7 @@ describe("FileBrowserPlugin keyboard accessibility", () => {
     const docsRow = docs.closest('[role="row"]')!;
     fireEvent.keyDown(docsRow, { key: "ArrowDown" }); // move active off the parent
     fireEvent.click(docs); // navigate into "docs"
-    await screen.findByText("docs"); // listing reloads (mock returns same files)
+    await within(screen.getByRole("grid")).findByText("docs"); // listing reloads (mock returns same files)
     const rows = screen.getAllByRole("row");
     expect(rows[0]).toHaveAttribute("tabindex", "0");
     // the focused row must match the only tabbable row
@@ -361,3 +367,80 @@ describe("FileBrowserPlugin keyboard accessibility", () => {
 function rowFor(name: string): HTMLElement {
   return screen.getByText(name).closest('[role="row"]') as HTMLElement;
 }
+
+describe("FileBrowserPlugin breadcrumbs", () => {
+  function breadcrumbs() {
+    return within(
+      screen.getByRole("navigation", { name: "Current directory" }),
+    );
+  }
+
+  it("renders a crumb per ancestor with the current directory last", async () => {
+    renderBrowser();
+    await screen.findByText("docs");
+    const items = breadcrumbs().getAllByRole("listitem");
+    expect(items.map((li) => li.textContent)).toEqual(["/", "home", "user"]);
+    expect(breadcrumbs().getByRole("button", { name: "user" })).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+    expect(
+      breadcrumbs().getByRole("button", { name: "home" }),
+    ).not.toHaveAttribute("aria-current");
+  });
+
+  it("keeps focus on a crumb after navigating to it", async () => {
+    const { listDirectory } = renderBrowser();
+    await screen.findByText("docs");
+    const home = breadcrumbs().getByRole("button", { name: "home" });
+    home.focus();
+    fireEvent.click(home);
+    await waitFor(() =>
+      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/home" }),
+    );
+    const current = breadcrumbs().getByRole("button", { name: "home" });
+    expect(current).toHaveAttribute("aria-current", "page");
+    expect(current).toBe(home);
+    expect(current).toHaveFocus();
+  });
+
+  it("does not reload when the current crumb is clicked", async () => {
+    const { listDirectory } = renderBrowser();
+    await screen.findByText("docs");
+    fireEvent.click(breadcrumbs().getByRole("button", { name: "user" }));
+    expect(listDirectory).toHaveBeenCalledTimes(1);
+  });
+
+  it("navigates to an ancestor when a crumb is clicked", async () => {
+    const { listDirectory } = renderBrowser();
+    await screen.findByText("docs");
+    fireEvent.click(breadcrumbs().getByRole("button", { name: "home" }));
+    await waitFor(() =>
+      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/home" }),
+    );
+    fireEvent.click(breadcrumbs().getByRole("button", { name: "/" }));
+    await waitFor(() =>
+      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/" }),
+    );
+  });
+
+  it("hides ancestors outside the initial path when navigation is restricted", async () => {
+    render(
+      <FileBrowser
+        initialPath="/home/user"
+        filetypes={[]}
+        selectionMode="all"
+        multiple={true}
+        label={null}
+        restrictNavigation={true}
+        value={[]}
+        setValue={vi.fn()}
+        host={document.createElement("div")}
+        list_directory={mockListDirectory(FILES)}
+      />,
+    );
+    await screen.findByText("docs");
+    const items = breadcrumbs().getAllByRole("listitem");
+    expect(items.map((li) => li.textContent)).toEqual(["user"]);
+  });
+});