@marimo-team/islands 0.23.14-dev25 → 0.23.14-dev30

package/package.json

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

package/src/components/data-table/charts/__tests__/merge-index-fields.test.ts

@@ -0,0 +1,33 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import type { FieldTypesWithExternalType } from "@/components/data-table/types";
+import { mergeIndexFields } from "../charts";
+
+describe("mergeIndexFields", () => {
+  it("appends row-header (index) fields to field types", () => {
+    const fieldTypes: FieldTypesWithExternalType = [["v", ["number", "int64"]]];
+    const rowHeaders: FieldTypesWithExternalType = [
+      ["k", ["string", "object"]],
+    ];
+    expect(mergeIndexFields(fieldTypes, rowHeaders)).toEqual([
+      ["v", ["number", "int64"]],
+      ["k", ["string", "object"]],
+    ]);
+  });
+
+  it("de-dupes when an index name matches a column name", () => {
+    const fieldTypes: FieldTypesWithExternalType = [["k", ["number", "int64"]]];
+    const rowHeaders: FieldTypesWithExternalType = [
+      ["k", ["string", "object"]],
+    ];
+    expect(mergeIndexFields(fieldTypes, rowHeaders)).toEqual([
+      ["k", ["number", "int64"]],
+    ]);
+  });
+
+  it("returns field types unchanged when there are no row headers", () => {
+    const fieldTypes: FieldTypesWithExternalType = [["v", ["number", "int64"]]];
+    expect(mergeIndexFields(fieldTypes, [])).toEqual(fieldTypes);
+  });
+});

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

@@ -54,6 +54,24 @@ const CHART_HEIGHT = 290;
 const CHART_MAX_ROWS = 50_000;
 const CHART_MAX_COLUMNS = 50;
 
+/**
+ * Append row-header (index) fields to the chart field list, skipping any whose
+ * name already exists as a data column so the chart builder never offers the
+ * same axis twice.
+ */
+export function mergeIndexFields(
+  fieldTypes: FieldTypesWithExternalType | null | undefined,
+  rowHeaders: FieldTypesWithExternalType | null | undefined,
+): FieldTypesWithExternalType {
+  const base = fieldTypes ?? [];
+  if (!rowHeaders || rowHeaders.length === 0) {
+    return base;
+  }
+  const seen = new Set(base.map(([name]) => name));
+  const indexFields = rowHeaders.filter(([name]) => !seen.has(name));
+  return [...base, ...indexFields];
+}
+
 export interface TablePanelProps {
   cellId: CellId | null;
   data: unknown[];
@@ -64,6 +82,7 @@ export interface TablePanelProps {
   onCloseChartBuilder?: () => void;
   getDataUrl?: GetDataUrl;
   fieldTypes?: FieldTypesWithExternalType | null;
+  rowHeaders?: FieldTypesWithExternalType | null;
 }
 
 export const TablePanel: React.FC<TablePanelProps> = ({
@@ -74,6 +93,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
   columns,
   getDataUrl,
   fieldTypes,
+  rowHeaders,
   displayHeader,
   onCloseChartBuilder,
 }) => {
@@ -265,7 +285,10 @@ export const TablePanel: React.FC<TablePanelProps> = ({
               saveChart={saveChart}
               saveChartType={saveChartType}
               getDataUrl={getDataUrl}
-              fieldTypes={fieldTypes ?? inferFieldTypes(dataTable.props.data)}
+              fieldTypes={mergeIndexFields(
+                fieldTypes ?? inferFieldTypes(dataTable.props.data),
+                rowHeaders,
+              )}
               isLargeDataset={isLargeDataset}
             />
           </TabsContent>

package/src/components/editor/renderers/grid-layout/grid-layout.tsx

@@ -35,7 +35,7 @@ import {
 import { Label } from "@/components/ui/label";
 import { NumberField } from "@/components/ui/number-field";
 import { Switch } from "@/components/ui/switch";
-import { outputIsLoading } from "@/core/cells/cell";
+import { outputIsLoading, outputIsStale } from "@/core/cells/cell";
 import type { CellId } from "@/core/cells/ids";
 import type { AppMode } from "@/core/mode";
 import { useIsDragging } from "@/hooks/useIsDragging";
@@ -222,6 +222,7 @@ export const GridLayoutRenderer: React.FC<Props> = ({
               cellId={cell.id}
               output={cell.output}
               status={cell.status}
+              stale={outputIsStale(cell, false)}
               isScrollable={isScrollable}
               side={side}
               hidden={cell.errored || cell.interrupted || cell.stopped}
@@ -288,6 +289,7 @@ export const GridLayoutRenderer: React.FC<Props> = ({
                 cellId={cell.id}
                 output={cell.output}
                 status={cell.status}
+                stale={outputIsStale(cell, false)}
                 isScrollable={false}
                 hidden={false}
               />
@@ -358,6 +360,7 @@ export const GridLayoutRenderer: React.FC<Props> = ({
                 output={cell.output}
                 isScrollable={false}
                 status={cell.status}
+                stale={outputIsStale(cell, false)}
                 hidden={false}
               />
             </div>
@@ -376,6 +379,7 @@ interface GridCellProps extends Pick<CellRuntimeState, "output" | "status"> {
   hidden: boolean;
   isScrollable: boolean;
   side?: GridLayoutCellSide;
+  stale: boolean;
 }
 
 const GridCell = memo(
@@ -389,6 +393,7 @@ const GridCell = memo(
     isScrollable,
     side,
     className,
+    stale,
   }: GridCellProps) => {
     const loading = outputIsLoading(status);
 
@@ -415,7 +420,7 @@ const GridCell = memo(
           allowExpand={false}
           output={output}
           cellId={cellId}
-          stale={loading}
+          stale={stale}
           loading={loading}
         />
       </div>

package/src/components/slides/__tests__/slide.test.tsx

@@ -0,0 +1,33 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { CellId } from "@/core/cells/ids";
+import type { OutputMessage } from "@/core/kernel/messages";
+import type { Seconds } from "@/utils/time";
+import { Slide } from "../slide";
+
+const cellId = "cell-1" as CellId;
+
+const output: OutputMessage = {
+  channel: "output",
+  mimetype: "text/plain",
+  data: "hello",
+  timestamp: 0 as Seconds,
+};
+
+describe("Slide", () => {
+  it("does not grey out the output when stale is false", () => {
+    const { container } = render(
+      <Slide cellId={cellId} status="running" output={output} stale={false} />,
+    );
+    expect(container.querySelector(".marimo-output-stale")).toBeNull();
+  });
+
+  it("greys out the output when stale is true", () => {
+    const { container } = render(
+      <Slide cellId={cellId} status="queued" output={output} stale={true} />,
+    );
+    expect(container.querySelector(".marimo-output-stale")).not.toBeNull();
+  });
+});

package/src/components/slides/minimap.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useDeleteCellCallback } from "@/components/editor/cell/useDeleteCell";
+import { outputIsStale } from "@/core/cells/cell";
 import { useCellActions, useCellIds } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import type { CellColumnId } from "@/utils/id-tree";
@@ -670,7 +671,12 @@ const SlideThumbnailCard = ({
           {isNoOutput ? (
             <MiniCodePreview code={cell.code} />
           ) : (
-            <Slide cellId={cell.id} status={cell.status} output={cell.output} />
+            <Slide
+              cellId={cell.id}
+              status={cell.status}
+              output={cell.output}
+              stale={outputIsStale(cell, false)}
+            />
           )}
         </div>
       )}

package/src/components/slides/reveal-component.tsx

@@ -16,6 +16,7 @@ import { Slide as CellOutputSlide } from "@/components/slides/slide";
 import { Button } from "@/components/ui/button";
 import { useFullScreenElement } from "@/components/ui/fullscreen";
 import { Tooltip } from "@/components/ui/tooltip";
+import { outputIsStale } from "@/core/cells/cell";
 import type { CellId } from "@/core/cells/ids";
 import type { RuntimeCell } from "@/core/cells/types";
 import type { RevealApi, RevealConfig } from "reveal.js";
@@ -333,6 +334,7 @@ const SubslideView = ({
                     cellId={cell.id}
                     status={cell.status}
                     output={cell.output}
+                    stale={outputIsStale(cell, false)}
                   />
                 );
               }
@@ -397,6 +399,7 @@ const ParkedPreviewContent = ({
       cellId={cell.id}
       status={cell.status}
       output={cell.output}
+      stale={outputIsStale(cell, false)}
     />
   );
 };

package/src/components/slides/slide-cell-view.tsx

@@ -13,6 +13,7 @@ import { StopButton } from "@/components/editor/cell/StopButton";
 import { useRunCell } from "@/components/editor/cell/useRunCells";
 import { Slide as CellOutputSlide } from "@/components/slides/slide";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
+import { outputIsStale } from "@/core/cells/cell";
 import { useCellActions } from "@/core/cells/cells";
 import { autoInstantiateAtom, useUserConfig } from "@/core/config/config";
 import {
@@ -96,6 +97,7 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
       cellId={cell.id}
       status={cell.status}
       output={cell.output}
+      stale={outputIsStale(cell, false)}
     />
   );
 
@@ -195,6 +197,7 @@ export const SlideCellReadOnlyView = ({ cell }: { cell: RuntimeCell }) => {
       cellId={cell.id}
       status={cell.status}
       output={cell.output}
+      stale={outputIsStale(cell, false)}
     />
   );
 

package/src/components/slides/slide.tsx

@@ -11,19 +11,22 @@ interface SlideContentProps extends Pick<
   "output" | "status"
 > {
   cellId: CellId;
+  stale: boolean;
 }
 
-export const Slide = memo(({ output, cellId, status }: SlideContentProps) => {
-  const loading = outputIsLoading(status);
-  return (
-    <OutputArea
-      className="contents"
-      allowExpand={false}
-      output={output}
-      cellId={cellId}
-      stale={loading}
-      loading={loading}
-    />
-  );
-});
+export const Slide = memo(
+  ({ output, cellId, status, stale }: SlideContentProps) => {
+    const loading = outputIsLoading(status);
+    return (
+      <OutputArea
+        className="contents"
+        allowExpand={false}
+        output={output}
+        cellId={cellId}
+        stale={stale}
+        loading={loading}
+      />
+    );
+  },
+);
 Slide.displayName = "Slide";

package/src/plugins/impl/DataTablePlugin.tsx

@@ -805,6 +805,7 @@ export const LoadingDataTableComponent = memo(
             dataTable={dataTable}
             getDataUrl={props.get_data_url}
             fieldTypes={props.fieldTypes}
+            rowHeaders={props.rowHeaders}
             cellId={cellId}
           />
         ) : (

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -140,7 +140,8 @@ const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
     return null;
   }
 
-  if (!isAnyWidgetModule(jsModule)) {
+  const widget = resolveAnyWidget(jsModule, jsUrl);
+  if (!widget) {
     return (
       <ErrorBanner error={getInvalidAnyWidgetModuleError(jsModule, jsUrl)} />
     );
@@ -150,7 +151,7 @@ const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
     <LoadedSlot
       // Force remount when the widget module or model changes (cell re-run).
       key={`${jsHash}:${modelId}`}
-      widget={jsModule.default}
+      widget={widget}
       modelId={modelId}
       host={host}
     />
@@ -200,6 +201,55 @@ function isAnyWidgetModule(mod: any): mod is { default: AnyWidget } {
   );
 }
 
+const warnedLegacyNamedExportUrls = new Set<string>();
+// Cache the synthesized widget per module namespace so its identity stays
+// stable across re-renders (like a default export), avoiding needless
+// WidgetBinding re-initialization.
+const legacyWidgetCache = new WeakMap<object, AnyWidget>();
+
+/**
+ * Resolve the AnyWidget from a loaded module: prefer the AFM-spec default
+ * export, otherwise synthesize one from legacy named `render`/`initialize`
+ * exports. Returns null if neither is present.
+ */
+function resolveAnyWidget(mod: any, jsUrl: string): AnyWidget | null {
+  if (isAnyWidgetModule(mod)) {
+    return mod.default;
+  }
+
+  // Only fall back to legacy (pre-AFM) named exports when there is no default
+  // export at all; a present-but-invalid default should surface an error
+  // rather than be masked.
+  if (mod?.default != null) {
+    return null;
+  }
+
+  const hasNamedRender = typeof mod?.render === "function";
+  const hasNamedInitialize = typeof mod?.initialize === "function";
+  if (!hasNamedRender && !hasNamedInitialize) {
+    return null;
+  }
+
+  const cached = legacyWidgetCache.get(mod);
+  if (cached) {
+    return cached;
+  }
+
+  if (!warnedLegacyNamedExportUrls.has(jsUrl)) {
+    warnedLegacyNamedExportUrls.add(jsUrl);
+    Logger.warn(
+      `Anywidget module at ${jsUrl} uses deprecated top-level named ` +
+        "exports (`render`/`initialize`). Per the AFM spec, use a default " +
+        "export instead: `export default { render }`. " +
+        "See https://anywidget.dev/en/afm/",
+    );
+  }
+
+  const widget: AnyWidget = { render: mod.render, initialize: mod.initialize };
+  legacyWidgetCache.set(mod, widget);
+  return widget;
+}
+
 function getInvalidAnyWidgetModuleError(mod: unknown, jsUrl: string): Error {
   const afmDocs = "https://anywidget.dev/en/afm/";
   const hasNamedRender = isRecord(mod) && hasFunctionProperty(mod, "render");
@@ -296,5 +346,6 @@ export const visibleForTesting = {
   LoadedSlot,
   runAnyWidgetModule,
   isAnyWidgetModule,
+  resolveAnyWidget,
   getInvalidAnyWidgetModuleError,
 };

package/src/plugins/impl/anywidget/__tests__/AnyWidgetPlugin.test.tsx

@@ -9,8 +9,12 @@ import { MODEL_MANAGER, Model } from "../model";
 import type { WidgetModelId } from "../types";
 import { BINDING_MANAGER } from "../widget-binding";
 
-const { LoadedSlot, isAnyWidgetModule, getInvalidAnyWidgetModuleError } =
-  visibleForTesting;
+const {
+  LoadedSlot,
+  isAnyWidgetModule,
+  resolveAnyWidget,
+  getInvalidAnyWidgetModuleError,
+} = visibleForTesting;
 
 // Helper to create typed model IDs for tests
 const asModelId = (id: string): WidgetModelId => id as WidgetModelId;
@@ -170,6 +174,52 @@ describe("isAnyWidgetModule", () => {
   });
 });
 
+describe("resolveAnyWidget", () => {
+  const jsUrl = "./@file/widget.js";
+
+  it("should return the default export when present", () => {
+    const widget = { render: () => undefined };
+    expect(resolveAnyWidget({ default: widget }, jsUrl)).toBe(widget);
+  });
+
+  it("should return a default factory function", () => {
+    const factory = async () => ({ render: () => {} });
+    expect(resolveAnyWidget({ default: factory }, jsUrl)).toBe(factory);
+  });
+
+  it("should synthesize a widget from a legacy named render export", () => {
+    const render = vi.fn();
+    const resolved = resolveAnyWidget({ render }, jsUrl);
+    expect(resolved).not.toBeNull();
+    expect(resolved).toMatchObject({ render });
+  });
+
+  it("should synthesize a widget from a legacy named initialize export", () => {
+    const initialize = vi.fn();
+    const resolved = resolveAnyWidget({ initialize }, jsUrl);
+    expect(resolved).not.toBeNull();
+    expect(resolved).toMatchObject({ initialize });
+  });
+
+  it("should return null for a module with no valid exports", () => {
+    expect(resolveAnyWidget({}, jsUrl)).toBeNull();
+    expect(resolveAnyWidget({ default: {} }, jsUrl)).toBeNull();
+    expect(resolveAnyWidget({ render: "not a function" }, jsUrl)).toBeNull();
+  });
+
+  it("should return a stable widget identity across calls for one module", () => {
+    const mod = { render: vi.fn() };
+    expect(resolveAnyWidget(mod, jsUrl)).toBe(resolveAnyWidget(mod, jsUrl));
+  });
+
+  it("should not fall back to named exports when a default export is present", () => {
+    // A present-but-invalid default should surface an error, not be masked.
+    expect(
+      resolveAnyWidget({ default: {}, render: vi.fn() }, jsUrl),
+    ).toBeNull();
+  });
+});
+
 describe("getInvalidAnyWidgetModuleError", () => {
   const jsUrl = "./@file/widget.js";