@marimo-team/islands 0.23.10-dev25 → 0.23.10-dev27

package/package.json

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

package/src/components/data-table/filter-by-values-picker.tsx

@@ -7,6 +7,8 @@ import { useMemo, useState } from "react";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
+import type { Option } from "@/components/ui/select-core";
+import { useSelectList } from "@/components/ui/select-core";
 import { Logger } from "@/utils/Logger";
 import { Sets } from "@/utils/sets";
 import { smartMatch } from "@/utils/smartMatch";
@@ -23,7 +25,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { SentinelCell } from "./sentinel-cell";
 import { detectSentinel, stringifyUnknownValue } from "./utils";
-import { CompactChipRow } from "./value-chips";
+import { CompactChipRow } from "@/components/ui/value-chips";
 
 const TOP_K_ROWS = 30;
 
@@ -101,8 +103,6 @@ export const FilterByValuesList = <TData, TValue>({
   onChange,
   creatable = false,
 }: FilterByValuesListProps<TData, TValue>) => {
-  const [query, setQuery] = useState<string>("");
-
   const { data, isPending, error } = useAsyncData(async () => {
     if (!calculateTopKRows) {
       return null;
@@ -111,27 +111,49 @@ export const FilterByValuesList = <TData, TValue>({
     return res.data;
   }, [calculateTopKRows, column.id]);
 
-  const filteredData = useMemo(() => {
+  const options = useMemo<Array<Option<unknown>>>(() => {
     if (!data) {
       return [];
     }
     try {
-      // try to do includes and also smart match for prefixes
-      return data.filter(([value, _count]) => {
-        if (value === undefined) {
-          return false;
-        }
-        const str = String(value);
-        return (
-          smartMatch(query, str) ||
-          str.toLowerCase().includes(query.toLowerCase())
-        );
-      });
+      return data
+        .filter(([value]) => value !== undefined)
+        .map(([value, count]) => ({
+          value,
+          label: String(value),
+          data: { count },
+        }));
     } catch (error_) {
-      Logger.error("Error filtering data", error_);
+      Logger.error("Error building filter options", error_);
       return [];
     }
-  }, [data, query]);
+  }, [data]);
+
+  const list = useSelectList<unknown>({
+    options,
+    value: [...chosenValues],
+    onChange: (next) => onChange(next as unknown[]),
+    multiple: true,
+    filterFn: (label, q) =>
+      smartMatch(q, label) || label.toLowerCase().includes(q.toLowerCase())
+        ? 1
+        : 0,
+  });
+
+  const query = list.searchQuery;
+  const setQuery = list.setSearchQuery;
+
+  const filteredData = useMemo<Array<[unknown, number | undefined]>>(
+    () =>
+      list.visibleOptions.map(
+        (o) =>
+          [o.value, (o.data as { count: number }).count] as [
+            unknown,
+            number | undefined,
+          ],
+      ),
+    [list.visibleOptions],
+  );
 
   // Surface chosen values that aren't in the top-K so they stay visible/uncheckable.
   // Count is undefined for these rows; the cell renders an em-dash.

package/src/components/data-table/filter-pills.tsx

@@ -21,7 +21,7 @@ import { AddFilterButton } from "./add-filter-button";
 import { FilterPillEditor } from "./filter-pill-editor";
 import { type ColumnFilterValue, formatValue, type Snapshot } from "./filters";
 import { extractTimezone } from "./types";
-import { ChipWithComma, CompactChipRow } from "./value-chips";
+import { ChipWithComma, CompactChipRow } from "@/components/ui/value-chips";
 
 interface Props<TData> {
   filters: ColumnFiltersState | undefined;

package/src/components/editor/cell/code/language-toggle.tsx

@@ -17,6 +17,11 @@ interface LanguageTogglesProps {
   code: string;
   currentLanguageAdapter: LanguageAdapter["type"] | undefined;
   onAfterToggle: () => void;
+  /**
+   * Classes for the wrapper element. Defaults to the absolutely-positioned,
+   * hover-revealed placement used inside the notebook cell editor.
+   */
+  className?: string;
 }
 
 export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
@@ -24,6 +29,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
   code,
   currentLanguageAdapter,
   onAfterToggle,
+  className = "absolute right-3 top-2 z-20 flex hover-action gap-1",
 }) => {
   const canUseMarkdown = useMemo(
     () => LanguageAdapters.markdown.isSupported(code) || code.trim() === "",
@@ -35,7 +41,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
   );
 
   return (
-    <div className="absolute right-3 top-2 z-20 flex hover-action gap-1">
+    <div className={className}>
       <LanguageToggle
         editorView={editorView}
         currentLanguageAdapter={currentLanguageAdapter}

package/src/components/editor/renderers/slides-layout/__tests__/plugin.test.ts

@@ -248,6 +248,26 @@ const BACKWARDS_COMPAT_SNAPSHOTS: BackwardsCompatCase[] = [
       ],
     },
   },
+  {
+    // `showCode` was added to SlideConfig. The validator must know about it (so
+    // it isn't silently stripped), the deserializer must carry it through, and
+    // serialize → deserialize must round-trip both values.
+    label: "showCode round-trips through validate + (de)serialize",
+    input: {
+      cells: [
+        { type: "slide", showCode: true },
+        { type: "fragment", showCode: false },
+      ],
+    },
+    expected: {
+      deck: {},
+      cellIds: ["a", "b"],
+      cellEntries: [
+        ["a", { type: "slide", showCode: true }],
+        ["b", { type: "fragment", showCode: false }],
+      ],
+    },
+  },
 ];
 
 describe("SlidesLayoutPlugin backwards compatibility", () => {

package/src/components/editor/renderers/slides-layout/types.ts

@@ -9,6 +9,7 @@ export type SlideType = z.infer<typeof SlideTypeSchema>;
 const SlideConfigSchema = z.looseObject({
   type: SlideTypeSchema.optional(),
   speakerNotes: z.string().optional(),
+  showCode: z.boolean().optional(),
 });
 export type SlideConfig = z.infer<typeof SlideConfigSchema>;
 

package/src/components/slides/__tests__/reveal-component.test.ts

@@ -0,0 +1,425 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import type { CellId } from "@/core/cells/ids";
+import type { RuntimeCell } from "@/core/cells/types";
+import type { SlideConfig } from "../../editor/renderers/slides-layout/types";
+import {
+  deckSlideType,
+  parkedRendersSource,
+  shouldShowCode,
+  useParkedPreview,
+} from "../reveal-component";
+
+const A = cellId("a");
+const B = cellId("b");
+
+const cells = (
+  ...entries: Array<[CellId, SlideConfig]>
+): ReadonlyMap<CellId, SlideConfig> => new Map(entries);
+
+// The hook only reads `cell.id`, so a minimal stub is enough. Cast is confined
+// to this test helper (see `@/__tests__/branded` for the same rationale).
+const cell = (id: CellId): RuntimeCell => ({ id }) as RuntimeCell;
+
+describe("shouldShowCode", () => {
+  it("is off when the code toggle is unavailable, regardless of config/override", () => {
+    expect(
+      shouldShowCode({
+        cells: cells([A, { showCode: true }]),
+        cellId: A,
+        showCodeOverrides: new Set([A]),
+        codeToggleEnabled: false,
+      }),
+    ).toBe(false);
+  });
+
+  it("is off when there is no active cell", () => {
+    expect(
+      shouldShowCode({
+        cells: cells([A, { showCode: true }]),
+        cellId: undefined,
+        showCodeOverrides: new Set(),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("follows the persisted config when there is no override", () => {
+    expect(
+      shouldShowCode({
+        cells: cells([A, { showCode: true }]),
+        cellId: A,
+        showCodeOverrides: new Set(),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(true);
+    // Missing config entry defaults to off.
+    expect(
+      shouldShowCode({
+        cells: cells(),
+        cellId: A,
+        showCodeOverrides: new Set(),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("shows code when either the config or the override is set (logical OR)", () => {
+    // Peek: config unset, override present -> shown.
+    expect(
+      shouldShowCode({
+        cells: cells(),
+        cellId: A,
+        showCodeOverrides: new Set([A]),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(true);
+    // Configured + override present -> still shown; the override never hides.
+    expect(
+      shouldShowCode({
+        cells: cells([A, { showCode: true }]),
+        cellId: A,
+        showCodeOverrides: new Set([A]),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(true);
+  });
+});
+
+describe("deckSlideType", () => {
+  const NONE_IDS: ReadonlySet<CellId> = new Set();
+
+  it("uses the configured type for a normal cell", () => {
+    expect(
+      deckSlideType({
+        cell: cell(A),
+        noOutputIds: NONE_IDS,
+        heldEditCellId: null,
+        slideConfigs: cells([A, { type: "fragment" }]),
+      }),
+    ).toBe("fragment");
+  });
+
+  it("defaults to a top-level slide when no type is configured", () => {
+    expect(
+      deckSlideType({
+        cell: cell(A),
+        noOutputIds: NONE_IDS,
+        heldEditCellId: null,
+        slideConfigs: cells(),
+      }),
+    ).toBe("slide");
+  });
+
+  it("drops output-less cells from the deck", () => {
+    expect(
+      deckSlideType({
+        cell: cell(A),
+        noOutputIds: new Set([A]),
+        heldEditCellId: null,
+        // Even an explicit type is overridden by the skip.
+        slideConfigs: cells([A, { type: "sub-slide" }]),
+      }),
+    ).toBe("skip");
+  });
+
+  it("drops the held-edit cell so it isn't mounted twice", () => {
+    expect(
+      deckSlideType({
+        cell: cell(A),
+        noOutputIds: NONE_IDS,
+        heldEditCellId: A,
+        slideConfigs: cells([A, { type: "slide" }]),
+      }),
+    ).toBe("skip");
+  });
+});
+
+describe("parkedRendersSource", () => {
+  it("follows `showCode` for a cell that has output", () => {
+    expect(
+      parkedRendersSource({
+        isNoOutputPreview: false,
+        isEditable: false,
+        showCode: true,
+      }),
+    ).toBe(true);
+    expect(
+      parkedRendersSource({
+        isNoOutputPreview: false,
+        isEditable: true,
+        showCode: false,
+      }),
+    ).toBe(false);
+  });
+
+  it("falls back to source for an editable no-output cell even when showCode is off", () => {
+    expect(
+      parkedRendersSource({
+        isNoOutputPreview: true,
+        isEditable: true,
+        showCode: false,
+      }),
+    ).toBe(true);
+  });
+
+  it("renders output for a read-only no-output cell with showCode off", () => {
+    expect(
+      parkedRendersSource({
+        isNoOutputPreview: true,
+        isEditable: false,
+        showCode: false,
+      }),
+    ).toBe(false);
+  });
+});
+
+describe("useParkedPreview", () => {
+  const NO_CONFIG = cells();
+  const NONE = new Set<CellId>();
+
+  it("is inert for a rendered cell with output", () => {
+    const { result } = renderHook(() =>
+      useParkedPreview({
+        activeCell: cell(A),
+        slideConfigs: NO_CONFIG,
+        noOutputIds: NONE,
+      }),
+    );
+    expect(result.current).toEqual({
+      parkedPreviewCell: null,
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("is inert when there is no active cell", () => {
+    const { result } = renderHook(() =>
+      useParkedPreview({
+        activeCell: undefined,
+        slideConfigs: NO_CONFIG,
+        noOutputIds: NONE,
+      }),
+    );
+    expect(result.current).toEqual({
+      parkedPreviewCell: null,
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("parks a skipped cell without flagging it as a no-output preview", () => {
+    const { result } = renderHook(() =>
+      useParkedPreview({
+        activeCell: cell(A),
+        slideConfigs: cells([A, { type: "skip" }]),
+        noOutputIds: NONE,
+      }),
+    );
+    expect(result.current).toEqual({
+      parkedPreviewCell: cell(A),
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("parks an output-less cell as a no-output preview", () => {
+    const { result } = renderHook(() =>
+      useParkedPreview({
+        activeCell: cell(A),
+        slideConfigs: NO_CONFIG,
+        noOutputIds: new Set([A]),
+      }),
+    );
+    expect(result.current).toEqual({
+      parkedPreviewCell: cell(A),
+      isHeldEdit: false,
+      isNoOutputPreview: true,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("holds the cell in the overlay once it gains output", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: NO_CONFIG,
+          noOutputIds: new Set([A]),
+        },
+      },
+    );
+    expect(result.current.isNoOutputPreview).toBe(true);
+    expect(result.current.isHeldEdit).toBe(false);
+
+    // Same cell, now with output: keep it parked so the editor isn't remounted.
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current).toEqual({
+      parkedPreviewCell: cell(A),
+      isHeldEdit: true,
+      isNoOutputPreview: false,
+      heldEditCellId: A,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("releases the hold when a different cell becomes active", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: NO_CONFIG,
+          noOutputIds: new Set([A]),
+        },
+      },
+    );
+    // Arm the hold, then let A gain output (held).
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current.isHeldEdit).toBe(true);
+
+    // Navigate to a rendered B: the hold on A is released.
+    rerender({
+      activeCell: cell(B),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current).toEqual({
+      parkedPreviewCell: null,
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("releases a skipped cell into the deck as soon as it is un-skipped", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: cells([A, { type: "skip" }]),
+          noOutputIds: NONE,
+        },
+      },
+    );
+    expect(result.current.parkedPreviewCell).toEqual(cell(A));
+
+    // Un-skip the still-active cell: it has output, so it must rejoin the deck
+    // immediately rather than staying held in the overlay until navigation.
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current).toEqual({
+      parkedPreviewCell: null,
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("shows the held editor by default and toggles it off without navigating", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: NO_CONFIG,
+          noOutputIds: new Set([A]),
+        },
+      },
+    );
+    // A gains output: held, with its editor shown by default.
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current.isHeldEdit).toBe(true);
+    expect(result.current.heldShowsCode).toBe(true);
+
+    // The `C` toggle hides the editor in place, no navigation required.
+    act(() => {
+      result.current.toggleHeldShowsCode();
+    });
+    expect(result.current.heldShowsCode).toBe(false);
+
+    // Toggling again brings it back.
+    act(() => {
+      result.current.toggleHeldShowsCode();
+    });
+    expect(result.current.heldShowsCode).toBe(true);
+  });
+
+  it("resets held code visibility when a new cell takes the held slot", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: NO_CONFIG,
+          noOutputIds: new Set([A]),
+        },
+      },
+    );
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    act(() => {
+      result.current.toggleHeldShowsCode();
+    });
+    expect(result.current.heldShowsCode).toBe(false);
+
+    // Move to a fresh output-less cell B, then let it gain output (held).
+    rerender({
+      activeCell: cell(B),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: new Set([B]),
+    });
+    rerender({
+      activeCell: cell(B),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current.heldEditCellId).toBe(B);
+    // The new cell starts with its editor visible again.
+    expect(result.current.heldShowsCode).toBe(true);
+  });
+});