@marimo-team/islands 0.24.1-dev113 → 0.24.1-dev115

package/dist/{swiper-component-Bqzl6az1.js → swiper-component-C90YjhaV.js}

@@ -1,9 +1,9 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { c as t, h as n, t as r } from "./button-BeWeF5Z2.js";
+import { c as t, h as n, t as r } from "./button-CKBkqR9J.js";
 import { t as i } from "./react-DMWcHin-.js";
 import { t as a } from "./compiler-runtime-CAH9RLw2.js";
 import { t as o } from "./jsx-runtime-CpoKNRgu.js";
-import { t as s } from "./useIframeCapabilities-Bj4ORYGz.js";
+import { t as s } from "./useIframeCapabilities-De3C-9b4.js";
 /* empty css                */
 //#region ../node_modules/.pnpm/swiper@12.1.2/node_modules/swiper/shared/ssr-window.esm.mjs
 var c = /* @__PURE__ */ e(i(), 1), l = a();

package/dist/{toDate-DxgaJjev.js → toDate-CrAIOASL.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { g as t } from "./button-BeWeF5Z2.js";
+import { g as t } from "./button-CKBkqR9J.js";
 import { t as n } from "./compiler-runtime-CAH9RLw2.js";
-import { u as r } from "./dist-CSjGX93W.js";
-import { E as i, _ as a, a as o, b as s } from "./useTheme-BlOgV7zf.js";
+import { u as r } from "./dist-mymH-A_x.js";
+import { E as i, _ as a, a as o, b as s } from "./useTheme-Bm9_FyqO.js";
 import { t as c } from "./invariant-DLmrl-hA.js";
 var l = r("circle-question-mark", [
 	["circle", {

package/dist/{tooltip-B1X8ECYn.js → tooltip-COXZxyl7.js}

@@ -1,10 +1,10 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { d as t, h as n, p as r } from "./button-BeWeF5Z2.js";
+import { d as t, h as n, p as r } from "./button-CKBkqR9J.js";
 import { t as i } from "./react-DMWcHin-.js";
 import { t as a } from "./compiler-runtime-CAH9RLw2.js";
-import { a as o, i as s, n as c, r as l, s as u, t as d } from "./dist-CSjGX93W.js";
+import { a as o, i as s, n as c, r as l, s as u, t as d } from "./dist-mymH-A_x.js";
 import { t as f } from "./jsx-runtime-CpoKNRgu.js";
-import { Bc as p, Dc as m, Ec as h, Hc as ee, Kc as g, Lc as _, Pc as v, Vc as y, Wc as b, kc as x, qc as S } from "./schemas-CLB4UWgG.js";
+import { Bc as p, Dc as m, Ec as h, Hc as ee, Kc as g, Lc as _, Pc as v, Vc as y, Wc as b, kc as x, qc as S } from "./schemas-BjeOpZLk.js";
 //#region ../node_modules/.pnpm/@radix-ui+react-tooltip@1.2.8_@types+react-dom@19.2.3_@types+react@19.2.10__@types+reac_6c936392a1aa34d496e116dc55299197/node_modules/@radix-ui/react-tooltip/dist/index.mjs
 var C = /* @__PURE__ */ e(i(), 1), w = f(), [T, E] = g("Tooltip", [o]), D = o(), O = "TooltipProvider", te = 700, k = "tooltip.open", [ne, A] = T(O), j = (e) => {
 	let { __scopeTooltip: t, delayDuration: n = te, skipDelayDuration: r = 300, disableHoverableContent: i = !1, children: a } = e, o = C.useRef(!0), s = C.useRef(!1), c = C.useRef(0);

package/dist/{useAsyncData-BkvtR_Y2.js → useAsyncData-x0_tWDWI.js}

@@ -1,7 +1,7 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-DMWcHin-.js";
 import { t as n } from "./compiler-runtime-CAH9RLw2.js";
-import { j as r } from "./useTheme-BlOgV7zf.js";
+import { j as r } from "./useTheme-Bm9_FyqO.js";
 import { t as i } from "./invariant-DLmrl-hA.js";
 //#region src/hooks/useAsyncData.ts
 var a = n(), o = /* @__PURE__ */ e(t(), 1), s = {

package/dist/{useDateFormatter-DGIhtjdF.js → useDateFormatter-B3V__WqX.js}

@@ -1,7 +1,7 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-DMWcHin-.js";
-import { u as n } from "./dist-CSjGX93W.js";
-import { E as r } from "./select-foAi7oM_.js";
+import { u as n } from "./dist-mymH-A_x.js";
+import { E as r } from "./select-DotAQ4jp.js";
 var i = n("chart-pie", [["path", {
 	d: "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z",
 	key: "pzmjnu"

package/dist/{useDeepCompareMemoize-DcZEHOmt.js → useDeepCompareMemoize-KaRHJEEU.js}

@@ -1,6 +1,6 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-DMWcHin-.js";
-import { A as n } from "./useTheme-BlOgV7zf.js";
+import { A as n } from "./useTheme-Bm9_FyqO.js";
 //#region src/hooks/useDeepCompareMemoize.ts
 var r = /* @__PURE__ */ e(t(), 1);
 function i(e) {

package/dist/{useIframeCapabilities-Bj4ORYGz.js → useIframeCapabilities-De3C-9b4.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./compiler-runtime-CAH9RLw2.js";
-import { t } from "./capabilities-C7Q0J4_N.js";
+import { t } from "./capabilities-CMBBJTcc.js";
 //#region src/hooks/useIframeCapabilities.ts
 var n = e();
 function r() {

package/dist/{useLifecycle-BHpzFL9q.js → useLifecycle-x0OriHo-.js}

@@ -1,10 +1,10 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { g as t, h as n, r } from "./button-BeWeF5Z2.js";
+import { g as t, h as n, r } from "./button-CKBkqR9J.js";
 import { t as i } from "./react-DMWcHin-.js";
 import { t as a } from "./compiler-runtime-CAH9RLw2.js";
-import { u as o } from "./dist-CSjGX93W.js";
+import { u as o } from "./dist-mymH-A_x.js";
 import { t as s } from "./jsx-runtime-CpoKNRgu.js";
-import { E as c, w as l } from "./useTheme-BlOgV7zf.js";
+import { E as c, w as l } from "./useTheme-Bm9_FyqO.js";
 var u = o("calendar", [
 	["path", {
 		d: "M8 2v4",
@@ -136,14 +136,14 @@ function g(e, n, r) {
 }
 //#endregion
 //#region src/components/ui/badge.tsx
-var _ = /* @__PURE__ */ e(i(), 1), v = s(), y = r("inline-flex items-center border rounded-full px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+var _ = /* @__PURE__ */ e(i(), 1), v = s(), y = r("inline-flex items-center border rounded-full px-2 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 forced-color-adjust-none", {
 	variants: { variant: {
-		default: "bg-primary hover:bg-primary/60 border-transparent text-primary-foreground",
-		defaultOutline: "bg-(--blue-2) border-(--blue-8) text-(--blue-11)",
-		secondary: "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
-		destructive: "bg-(--red-2) border-(--red-6) text-(--red-9) hover:bg-(--red-3)",
-		success: "bg-(--grass-2) border-(--grass-5) text-(--grass-9) hover:bg-(--grass-3)",
-		outline: "text-foreground"
+		default: "bg-primary hover:bg-primary/60 border-transparent text-primary-foreground forced-colors:bg-[Highlight] forced-colors:border-[Highlight] forced-colors:text-[HighlightText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText]",
+		defaultOutline: "bg-(--blue-2) border-(--blue-8) text-(--blue-11) forced-colors:bg-[Canvas] forced-colors:border-[Highlight] forced-colors:text-[CanvasText]",
+		secondary: "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground forced-colors:bg-[ButtonFace] forced-colors:border-[ButtonText] forced-colors:text-[ButtonText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText]",
+		destructive: "bg-(--red-2) border-(--red-6) text-(--red-9) hover:bg-(--red-3) forced-colors:bg-[Canvas] forced-colors:border-[ButtonText] forced-colors:text-[CanvasText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText]",
+		success: "bg-(--grass-2) border-(--grass-5) text-(--grass-9) hover:bg-(--grass-3) forced-colors:bg-[Canvas] forced-colors:border-[ButtonText] forced-colors:text-[CanvasText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText]",
+		outline: "text-foreground forced-colors:bg-[Canvas] forced-colors:border-[ButtonText] forced-colors:text-[CanvasText]"
 	} },
 	defaultVariants: { variant: "default" }
 }), b = (e) => {

package/dist/{useTheme-BlOgV7zf.js → useTheme-Bm9_FyqO.js}

@@ -1,8 +1,8 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { a as t, g as n, s as r } from "./button-BeWeF5Z2.js";
+import { a as t, g as n, s as r } from "./button-CKBkqR9J.js";
 import { t as i } from "./react-DMWcHin-.js";
 import { t as a } from "./compiler-runtime-CAH9RLw2.js";
-import { Cn as o, In as s, Jn as c, Sn as l, Tt as u, jn as d, kt as f, un as p, vt as m } from "./schemas-CLB4UWgG.js";
+import { Cn as o, In as s, Jn as c, Sn as l, Tt as u, jn as d, kt as f, un as p, vt as m } from "./schemas-BjeOpZLk.js";
 import { n as h, t as g } from "./_baseMerge-Dv8bBloN.js";
 //#region ../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/mergeWith.js
 var _ = h(function(e, t, n, r) {

package/dist/{vega-component-B4rwjseP.js → vega-component-nD2oP6WN.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-BeWeF5Z2.js";
+import { g as t, h as n, m as r, o as i } from "./button-CKBkqR9J.js";
 import { t as a } from "./react-DMWcHin-.js";
 import { t as o } from "./compiler-runtime-CAH9RLw2.js";
-import { c as s, v as c } from "./toDate-DxgaJjev.js";
+import { c as s, v as c } from "./toDate-CrAIOASL.js";
 import { t as l } from "./jsx-runtime-CpoKNRgu.js";
-import { n as u } from "./error-banner-C0gx40vn.js";
-import { t as d } from "./tooltip-B1X8ECYn.js";
+import { n as u } from "./error-banner-DmgOcFS3.js";
+import { t as d } from "./tooltip-COXZxyl7.js";
 import { t as f } from "./debounce-C3jyATpc.js";
-import { j as p, n as ee } from "./useTheme-BlOgV7zf.js";
+import { j as p, n as ee } from "./useTheme-Bm9_FyqO.js";
 import { c as m } from "./arrays-CN1djC4k.js";
 import { t as te } from "./objects-CzUgoMIF.js";
-import { t as h } from "./useAsyncData-BkvtR_Y2.js";
-import { a as ne, i as re, n as ie, t as g } from "./formats-CX_fkiT0.js";
+import { t as h } from "./useAsyncData-x0_tWDWI.js";
+import { a as ne, i as re, n as ie, t as g } from "./formats-DuRRWVwb.js";
 import { A as ae, n as oe } from "./vega-loader.browser-DEggZzni.js";
 import { t as se } from "./react-vega-DSD5aT7_.js";
-import { a as ce, n as _ } from "./loader-BIZus5lj.js";
-import { t as le } from "./useDeepCompareMemoize-DcZEHOmt.js";
+import { a as ce, n as _ } from "./loader-VZ__bv4g.js";
+import { t as le } from "./useDeepCompareMemoize-KaRHJEEU.js";
 import { t as ue } from "./semaphore-89jsoHtS.js";
 import { t as de } from "./use-vega-container-remeasure-DUW4tRxq.js";
 //#region src/plugins/impl/vega/fix-relative-url.ts

package/package.json

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

package/src/components/dependency-graph/__tests__/elements.test.ts

@@ -0,0 +1,151 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import type { CellId } from "@/core/cells/ids";
+import type { Variable, VariableName, Variables } from "@/core/variables/types";
+import { createCellRuntimeState } from "@/core/cells/types";
+import {
+  collapsedNodeWidth,
+  computeDefsByCell,
+  isStateFlowVariable,
+  reusableCellIds,
+  wrapDefs,
+} from "../elements";
+
+const names = (list: string[]) => list as VariableName[];
+
+function variable(
+  partial: Omit<Partial<Variable>, "name"> & { name: string },
+): Variable {
+  return {
+    declaredBy: [],
+    usedBy: [],
+    ...partial,
+    name: partial.name as VariableName,
+  };
+}
+
+describe("collapsedNodeWidth", () => {
+  it("clamps short labels to the minimum width", () => {
+    expect(collapsedNodeWidth("")).toBe(90);
+    expect(collapsedNodeWidth("x")).toBe(90);
+  });
+
+  it("clamps long labels to the maximum width", () => {
+    expect(collapsedNodeWidth("a".repeat(100))).toBe(240);
+  });
+
+  it("scales with label length between the bounds", () => {
+    const width = collapsedNodeWidth("df, summary");
+    expect(width).toBeGreaterThan(90);
+    expect(width).toBeLessThan(240);
+  });
+});
+
+describe("isStateFlowVariable", () => {
+  it("flags State and SetFunctor (from mo.state)", () => {
+    expect(
+      isStateFlowVariable(variable({ name: "g", dataType: "State" })),
+    ).toBe(true);
+    expect(
+      isStateFlowVariable(variable({ name: "s", dataType: "SetFunctor" })),
+    ).toBe(true);
+  });
+
+  it("does not flag UI elements or plain values", () => {
+    // UIElement is frontend-driven / immutable during a run — not a state flow.
+    expect(
+      isStateFlowVariable(variable({ name: "sl", dataType: "slider" })),
+    ).toBe(false);
+    expect(isStateFlowVariable(variable({ name: "n", dataType: "int" }))).toBe(
+      false,
+    );
+    expect(isStateFlowVariable(variable({ name: "u", dataType: null }))).toBe(
+      false,
+    );
+    expect(isStateFlowVariable(variable({ name: "u2" }))).toBe(false);
+  });
+});
+
+describe("wrapDefs", () => {
+  it("packs short names to the 12-char minimum budget", () => {
+    expect(
+      wrapDefs(names(["np", "math", "time", "io", "numpy", "pandas"])),
+    ).toEqual(["np, math", "time, io", "numpy", "pandas"]);
+  });
+
+  it("gives a long name its own line, then packs the rest to its width", () => {
+    expect(
+      wrapDefs(
+        names([
+          "very_very_very_long_variable_name",
+          "short_var",
+          "shr_v",
+          "io",
+          "numpy",
+          "wev",
+        ]),
+      ),
+    ).toEqual([
+      "very_very_very_long_variable_name",
+      "short_var, shr_v, io, numpy, wev",
+    ]);
+  });
+
+  it("returns an empty list for no defs", () => {
+    expect(wrapDefs(names([]))).toEqual([]);
+  });
+
+  it("caps the budget so packed lines fit the max node width", () => {
+    // One name far beyond the width cap must not widen every other line.
+    const huge = "x".repeat(60);
+    const lines = wrapDefs(
+      names([huge, "aaaaaaaaaa", "bbbbbbbbbb", "cccccccccc"]),
+    );
+    expect(lines[0]).toBe(huge);
+    for (const line of lines.slice(1)) {
+      expect(line.length).toBeLessThanOrEqual(33);
+    }
+  });
+});
+
+describe("computeDefsByCell", () => {
+  it("maps each cell to the variables it declares", () => {
+    const c1 = "c1" as CellId;
+    const c2 = "c2" as CellId;
+    const a = "a" as VariableName;
+    const b = "b" as VariableName;
+    const c = "c" as VariableName;
+    const variables: Variables = {
+      [a]: variable({ name: a, declaredBy: [c1], usedBy: [c2] }),
+      [b]: variable({ name: b, declaredBy: [c1] }),
+      [c]: variable({ name: c, declaredBy: [c2] }),
+    };
+    const defs = computeDefsByCell(variables);
+    expect(defs.get(c1)).toEqual([a, b]);
+    expect(defs.get(c2)).toEqual([c]);
+  });
+
+  it("returns an empty map when there are no variables", () => {
+    expect(computeDefsByCell({}).size).toBe(0);
+  });
+});
+
+describe("reusableCellIds", () => {
+  const c1 = "c1" as CellId;
+  const c2 = "c2" as CellId;
+  const c3 = "c3" as CellId;
+
+  it("collects cells whose serialization hint is valid, case-insensitively", () => {
+    const runtime = {
+      [c1]: createCellRuntimeState({ serialization: "Valid" }),
+      [c2]: createCellRuntimeState({ serialization: "Unparsable" }),
+      [c3]: createCellRuntimeState(),
+    };
+    expect(reusableCellIds([c1, c2, c3], runtime)).toEqual(new Set([c1]));
+  });
+
+  it("ignores cells with no runtime entry", () => {
+    expect(reusableCellIds([c1], {})).toEqual(new Set());
+  });
+});

package/src/components/dependency-graph/custom-edge.tsx

@@ -0,0 +1,68 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { memo } from "react";
+import { BaseEdge, type EdgeProps, getBezierPath } from "reactflow";
+import {
+  DEFAULT_EDGE_COLOR,
+  type DependencyEdgeData,
+  STATE_FLOW_EDGE_COLOR,
+} from "./elements";
+
+// Gentle curvature keeps edges reading as clean directional splines
+// (TensorBoard-style) rather than hard right-angle elbows.
+const EDGE_CURVATURE = 0.35;
+
+/**
+ * A dependency edge, drawn as a smooth curved spline that flows out of the
+ * source handle and into the target — the TensorBoard graph aesthetic. Mutable
+ * `State`/setter flows get a distinct dashed accent style.
+ */
+export const DependencyEdge = memo((props: EdgeProps<DependencyEdgeData>) => {
+  const {
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    markerEnd,
+    data,
+    selected,
+  } = props;
+
+  const [path] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    curvature: EDGE_CURVATURE,
+  });
+
+  const isStateFlow = data?.isStateFlow ?? false;
+  // The inline stroke replaces React Flow's stylesheet-driven edge colors, so
+  // the selected state must be restyled here too or it becomes invisible.
+  const stroke = selected
+    ? "var(--primary)"
+    : isStateFlow
+      ? STATE_FLOW_EDGE_COLOR
+      : DEFAULT_EDGE_COLOR;
+
+  return (
+    <BaseEdge
+      path={path}
+      markerEnd={markerEnd}
+      style={{
+        strokeWidth: selected ? 2.5 : isStateFlow ? 2 : 1.5,
+        stroke,
+        strokeDasharray: isStateFlow ? "5 3" : undefined,
+      }}
+    />
+  );
+});
+DependencyEdge.displayName = "DependencyEdge";
+
+export const edgeTypes = {
+  dependency: DependencyEdge,
+};

package/src/components/dependency-graph/custom-node.tsx

@@ -2,25 +2,20 @@
 
 import { useAtomValue } from "jotai";
 import React, { memo, use } from "react";
-import { Handle, Position, useStore } from "reactflow";
+import { Handle, Position } from "reactflow";
 import { TinyCode } from "@/components/editor/cell/TinyCode";
 import { useCellIds } from "@/core/cells/cells";
-import { displayCellName } from "@/core/cells/names";
+import { displayCellName, isInternalCellName } from "@/core/cells/names";
 import { cn } from "@/utils/cn";
 import {
   type CustomNodeProps,
-  getNodeHeight,
   INPUTS_HANDLE_ID,
+  nodeBodyLines,
+  nodeDimensions,
   OUTPUTS_HANDLE_ID,
 } from "./elements";
 import type { LayoutDirection } from "./types";
-
-function getWidth(canvasWidth: number) {
-  const minWidth = 100;
-  const maxWidth = 400;
-  const padding = 50;
-  return Math.min(Math.max(canvasWidth - padding * 2, minWidth), maxWidth);
-}
+import { extractCellPreview } from "./utils/cell-preview";
 
 export const EdgeMarkerContext = React.createContext<LayoutDirection>("LR");
 
@@ -36,13 +31,19 @@ export const CustomNode = memo((props: CustomNodeProps) => {
   const { data, selected } = props; // must match the equality check
   const cell = useAtomValue(data.atom);
   const cellIndex = useCellIds().inOrderIds.indexOf(cell.id);
-  const nonSelectedColor = "var(--gray-3)";
-  const selectedColor = "var(--gray-9)";
-  const color = selected ? selectedColor : nonSelectedColor;
-  const reactFlowWidth = useStore(({ width }) => width);
+  const handleColor = selected ? "var(--gray-9)" : "var(--gray-3)";
   const edgeMarkers = use(EdgeMarkerContext);
 
-  const linesOfCode = cell.code.split("\n").length;
+  const { width, height } = nodeDimensions(data);
+  const isNamed = !isInternalCellName(cell.name);
+  const name = displayCellName(cell.name, cellIndex);
+  // Only collapsed nodes without defs render the preview; skip the parse
+  // otherwise, since it scales with notebook size.
+  const preview =
+    !data.expanded && data.defs.length === 0
+      ? extractCellPreview(cell.code).text
+      : undefined;
+
   return (
     <div>
       <Handle
@@ -50,43 +51,70 @@ export const CustomNode = memo((props: CustomNodeProps) => {
         id={INPUTS_HANDLE_ID}
         data-testid="input-one"
         position={edgeMarkers === "LR" ? Position.Left : Position.Top}
-        style={{ background: color }}
+        style={{ background: handleColor }}
       />
       <Handle
         type="source"
         id={INPUTS_HANDLE_ID}
         data-testid="input-two"
         position={edgeMarkers === "LR" ? Position.Left : Position.Top}
-        style={{ background: color }}
+        style={{ background: handleColor }}
       />
       <div
         className={cn(
           "flex flex-col bg-card border border-input/50 rounded-md mx-[2px] overflow-hidden",
           selected && "border-primary",
         )}
-        style={{
-          height: getNodeHeight(linesOfCode),
-          width: data.forceWidth || getWidth(reactFlowWidth),
-        }}
+        style={{ height, width }}
       >
-        <div className="text-muted-foreground font-semibold text-xs py-1 px-2 bg-muted border-b">
-          {displayCellName(cell.name, cellIndex)}
+        <div className="text-xs py-0.5 px-2 bg-muted border-b flex items-center justify-between gap-2 shrink-0">
+          <span
+            className={cn(
+              "truncate",
+              isNamed
+                ? "font-semibold text-foreground"
+                : "text-muted-foreground/70",
+            )}
+          >
+            {name}
+          </span>
         </div>
-        <TinyCode code={cell.code} />
+        {data.expanded ? (
+          <TinyCode code={cell.code} />
+        ) : (
+          <div className="flex-1 min-h-0 flex flex-col justify-center px-2 py-1 font-mono text-xs leading-4">
+            {data.defs.length > 0 ? (
+              // Defs wrapped into comma-separated lines — taller, not wider.
+              nodeBodyLines(data).map((line) => (
+                <span
+                  key={line}
+                  className="text-foreground truncate"
+                  title={line}
+                >
+                  {line}
+                </span>
+              ))
+            ) : (
+              <span className="truncate italic text-muted-foreground/60">
+                {preview ?? "empty"}
+              </span>
+            )}
+          </div>
+        )}
       </div>
       <Handle
         type="source"
         id={OUTPUTS_HANDLE_ID}
         data-testid="output-one"
         position={edgeMarkers === "LR" ? Position.Right : Position.Bottom}
-        style={{ background: color }}
+        style={{ background: handleColor }}
       />
       <Handle
         type="target"
         id={OUTPUTS_HANDLE_ID}
         data-testid="output-two"
         position={edgeMarkers === "LR" ? Position.Right : Position.Bottom}
-        style={{ background: color }}
+        style={{ background: handleColor }}
       />
     </div>
   );