@marimo-team/islands 0.23.1-dev2 → 0.23.1-dev20

package/dist/{toDate-D0QaHNwR.js → toDate-CfGr2xZ1.js}

@@ -3,10 +3,10 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { u as createLucideIcon } from "./dist-D56NKWim.js";
-import { g as Logger } from "./button-DNlNlZY_.js";
+import { u as createLucideIcon } from "./dist-CjLQ79mo.js";
+import { g as Logger } from "./button-Cn59RsBF.js";
 import { r as KnownQueryParams } from "./constants-CvyfaCvs.js";
-import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-CxjbgkRc.js";
+import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-ytmywQ5O.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {
     cx: "12",

package/dist/{tooltip-B5EnNyok.js → tooltip-BusGYw7Q.js}

@@ -1,10 +1,10 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-D56NKWim.js";
-import { f as createSlottable, m as useComposedRefs, y as cn } from "./button-DNlNlZY_.js";
+import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-CjLQ79mo.js";
+import { f as createSlottable, m as useComposedRefs, y as cn } from "./button-Cn59RsBF.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { $ as StyleNamespace, X as withFullScreenAsRoot, Z as withSmartCollisionBoundary, _t as Primitive, dt as Presence, ft as useControllableState, gt as createContextScope, it as Portal, mt as composeEventHandlers, st as DismissableLayer, ut as useId } from "./zod-D18k8Z52.js";
+import { $ as StyleNamespace, X as withFullScreenAsRoot, Z as withSmartCollisionBoundary, _t as Primitive, dt as Presence, ft as useControllableState, gt as createContextScope, it as Portal, mt as composeEventHandlers, st as DismissableLayer, ut as useId } from "./zod-D4UoCYGu.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [createPopperScope]), usePopperScope = createPopperScope(), PROVIDER_NAME = "TooltipProvider", DEFAULT_DELAY_DURATION = 700, TOOLTIP_OPEN = "tooltip.open", [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME), TooltipProvider$1 = (t) => {
   let { __scopeTooltip: j, delayDuration: M = DEFAULT_DELAY_DURATION, skipDelayDuration: N = 300, disableHoverableContent: P = false, children: F } = t, I = import_react.useRef(true), L = import_react.useRef(false), R = import_react.useRef(0);
   return import_react.useEffect(() => {
@@ -399,6 +399,5 @@ export {
   TooltipContent as n,
   TooltipTrigger as o,
   TooltipPortal as r,
-  Provider as s,
   Tooltip as t
 };

package/dist/{types-D4-TD_m0.js → types-D4CFUmPq.js}

@@ -1,8 +1,8 @@
 import { s as __toESM, t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { u as createLucideIcon } from "./dist-D56NKWim.js";
-import { t as Button } from "./button-DNlNlZY_.js";
+import { u as createLucideIcon } from "./dist-CjLQ79mo.js";
+import { t as Button } from "./button-Cn59RsBF.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
 import { n as Constants } from "./constants-CvyfaCvs.js";
 var Pencil = createLucideIcon("pencil", [["path", {

package/dist/{useAsyncData-BG3ULuDU.js → useAsyncData-BzS3Ai32.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { w as useEvent_default } from "./useTheme-CxjbgkRc.js";
+import { w as useEvent_default } from "./useTheme-ytmywQ5O.js";
 import { t as invariant } from "./invariant-e8eBgdux.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDeepCompareMemoize-CkSq3l3_.js → useDeepCompareMemoize-AjORjhpL.js}

@@ -1,11 +1,11 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { t as toDate } from "./toDate-D0QaHNwR.js";
-import { r as cva, y as cn } from "./button-DNlNlZY_.js";
+import { t as toDate } from "./toDate-CfGr2xZ1.js";
+import { r as cva, y as cn } from "./button-Cn59RsBF.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { C as dequal } from "./useTheme-CxjbgkRc.js";
-import { i as tableFromIPC } from "./loader-Bd1kgLn7.js";
+import { C as dequal } from "./useTheme-ytmywQ5O.js";
+import { i as tableFromIPC } from "./loader-JmfPBSx5.js";
 function isDate(t) {
   return t instanceof Date || typeof t == "object" && Object.prototype.toString.call(t) === "[object Date]";
 }

package/dist/{useIframeCapabilities-CqhrVue6.js → useIframeCapabilities---aRgGdv.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { t as getIframeCapabilities } from "./capabilities-Coe9eM9T.js";
+import { t as getIframeCapabilities } from "./capabilities-Bml77Di-.js";
 var import_compiler_runtime = require_compiler_runtime();
 require_react();
 function useIframeCapabilities() {

package/dist/{useLifecycle-2Vh-WDv6.js → useLifecycle-B90lJH4p.js}

@@ -1,10 +1,10 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { u as createLucideIcon } from "./dist-D56NKWim.js";
-import { g as Logger, r as cva, y as cn } from "./button-DNlNlZY_.js";
+import { u as createLucideIcon } from "./dist-CjLQ79mo.js";
+import { g as Logger, r as cva, y as cn } from "./button-Cn59RsBF.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { _ as useSetAtom, y as atom } from "./useTheme-CxjbgkRc.js";
+import { _ as useSetAtom, y as atom } from "./useTheme-ytmywQ5O.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

package/dist/{useTheme-CxjbgkRc.js → useTheme-ytmywQ5O.js}

@@ -1,8 +1,8 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { a as OverridingHotkeyProvider, g as Logger, s as resolvePlatform } from "./button-DNlNlZY_.js";
-import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-D18k8Z52.js";
+import { a as OverridingHotkeyProvider, g as Logger, s as resolvePlatform } from "./button-Cn59RsBF.js";
+import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-D4UoCYGu.js";
 import { t as merge_default } from "./merge-CVhG7q_o.js";
 var import_react = /* @__PURE__ */ __toESM(require_react()), useInsertionEffect = typeof window < "u" ? import_react.useInsertionEffect || import_react.useLayoutEffect : () => {
 };

package/dist/{vega-component-z4WGXPkf.js → vega-component-C3akWtJ1.js}

@@ -1,20 +1,20 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { c as asRemoteURL, g as CircleQuestionMark } from "./toDate-D0QaHNwR.js";
-import { c as Objects, g as Logger, h as Events, y as cn } from "./button-DNlNlZY_.js";
+import { c as asRemoteURL, g as CircleQuestionMark } from "./toDate-CfGr2xZ1.js";
+import { c as Objects, g as Logger, h as Events, y as cn } from "./button-Cn59RsBF.js";
 import "./react-dom-BSUuJjCR.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import "./zod-D18k8Z52.js";
-import { n as ErrorBanner } from "./error-banner-DexD-5js.js";
-import { t as Tooltip } from "./tooltip-B5EnNyok.js";
+import "./zod-D4UoCYGu.js";
+import { n as ErrorBanner } from "./error-banner-BQcJXy6k.js";
+import { t as Tooltip } from "./tooltip-BusGYw7Q.js";
 import { i as debounce_default } from "./constants-CvyfaCvs.js";
-import { n as useTheme, w as useEvent_default } from "./useTheme-CxjbgkRc.js";
+import { n as useTheme, w as useEvent_default } from "./useTheme-ytmywQ5O.js";
 import { s as uniq } from "./arrays-beUWo8RF.js";
-import { a as AlertTitle, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-CkSq3l3_.js";
+import { a as AlertTitle, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-AjORjhpL.js";
 import { n as formats } from "./vega-loader.browser-DqEcFOPD.js";
-import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-Bd1kgLn7.js";
-import { t as useAsyncData } from "./useAsyncData-BG3ULuDU.js";
+import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-JmfPBSx5.js";
+import { t as useAsyncData } from "./useAsyncData-BzS3Ai32.js";
 import { t as j } from "./react-vega-CzRAIHrv.js";
 import "./defaultLocale-qS7DaAmi.js";
 import "./defaultLocale-Bxoo2-30.js";

package/dist/{zod-D18k8Z52.js → zod-D4UoCYGu.js}

@@ -1,7 +1,7 @@
 import { r as __export, s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { d as createSlot, l as useEventListener, m as useComposedRefs } from "./button-DNlNlZY_.js";
+import { d as createSlot, l as useEventListener, m as useComposedRefs } from "./button-Cn59RsBF.js";
 import { t as require_react_dom } from "./react-dom-BSUuJjCR.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_react_dom$1 = /* @__PURE__ */ __toESM(require_react_dom(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), Primitive = [

package/package.json

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

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

@@ -1,12 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import React, { memo } from "react";
-import { outputIsLoading } from "@/core/cells/cell";
+import React, { useState } from "react";
+import { useAtomValue } from "jotai";
+import { numColumnsAtom } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
-import type { CellRuntimeState } from "@/core/cells/types";
-import type { AppMode } from "@/core/mode";
-import { OutputArea } from "../../Output";
 import type { ICellRendererProps } from "../types";
 import type { SlidesLayout } from "./types";
+import { SlidesMinimap } from "@/components/slides/minimap";
+import { Slide } from "@/components/slides/slide";
+import useEvent from "react-use-event-hook";
 
 type Props = ICellRendererProps<SlidesLayout>;
 
@@ -22,25 +23,41 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   mode,
 }) => {
   const isReading = mode === "read";
+  const numColumns = useAtomValue(numColumnsAtom);
+  const isMultiColumn = numColumns > 1;
+  const [activeCellId, setActiveCellId] = useState<CellId | null>(null);
+
+  const cellsWithOutput = cells.filter(
+    (cell) => cell.output != null && cell.output.data !== "",
+  );
+
+  const activeSlideIndex = activeCellId
+    ? cellsWithOutput.findIndex((c) => c.id === activeCellId)
+    : 0;
+  const resolvedIndex = activeSlideIndex === -1 ? 0 : activeSlideIndex;
+
+  const handleSlideChange = useEvent((index: number) => {
+    const cell = cellsWithOutput[index];
+    if (cell) {
+      setActiveCellId(cell.id);
+    }
+  });
 
   const slides = (
-    <LazySlidesComponent forceKeyboardNavigation={true} className="flex-1">
-      {cells.map((cell) => {
-        const isOutputEmpty = cell.output == null || cell.output.data === "";
-        if (isOutputEmpty) {
-          return null;
-        }
-        return (
-          <Slide
-            key={cell.id}
-            cellId={cell.id}
-            code={cell.code}
-            status={cell.status}
-            output={cell.output}
-            mode={mode}
-          />
-        );
-      })}
+    <LazySlidesComponent
+      forceKeyboardNavigation={true}
+      className="flex-1 self-center"
+      activeIndex={resolvedIndex}
+      onActiveIndexChange={handleSlideChange}
+    >
+      {cellsWithOutput.map((cell) => (
+        <Slide
+          key={cell.id}
+          cellId={cell.id}
+          status={cell.status}
+          output={cell.output}
+        />
+      ))}
     </LazySlidesComponent>
   );
 
@@ -48,27 +65,16 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
     return <div className="p-4 flex flex-col flex-1 max-h-[95%]">{slides}</div>;
   }
 
-  return <div className="pr-18 pb-5 flex-1 flex flex-col">{slides}</div>;
-};
-
-interface SlideProps extends Pick<CellRuntimeState, "output" | "status"> {
-  className?: string;
-  code: string;
-  cellId: CellId;
-  mode: AppMode;
-}
-
-const Slide = memo(({ output, cellId, status }: SlideProps) => {
-  const loading = outputIsLoading(status);
   return (
-    <OutputArea
-      className="contents"
-      allowExpand={false}
-      output={output}
-      cellId={cellId}
-      stale={loading}
-      loading={loading}
-    />
+    // Use 11/12 to ensure all content fits on the page (no overflow, scrolling required)
+    <div className="pr-18 pb-5 flex-1 flex flex-row max-h-11/12 gap-2">
+      <SlidesMinimap
+        cells={cellsWithOutput}
+        canReorder={!isMultiColumn}
+        activeCellId={activeCellId ?? cellsWithOutput[0]?.id ?? null}
+        onSlideClick={handleSlideChange}
+      />
+      {slides}
+    </div>
   );
-});
-Slide.displayName = "Slide";
+};