@marimo-team/islands 0.23.3-dev9 → 0.23.3

package/src/components/slides/slide-form.tsx

@@ -0,0 +1,347 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  EyeOffIcon,
+  LayoutTemplateIcon,
+  type LucideIcon,
+  Rows2Icon,
+  CookieIcon,
+  PanelRightCloseIcon,
+  PanelRightOpenIcon,
+} from "lucide-react";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { CellId } from "@/core/cells/ids";
+import { cn } from "@/utils/cn";
+import type {
+  DeckTransition,
+  SlidesLayout,
+  SlideType,
+} from "../editor/renderers/slides-layout/types";
+import { useState } from "react";
+import { Tooltip } from "../ui/tooltip";
+import { Button } from "../ui/button";
+import type { RuntimeCell } from "@/core/cells/types";
+
+export const DEFAULT_SLIDE_TYPE: SlideType = "slide";
+export const DEFAULT_DECK_TRANSITION: DeckTransition = "slide";
+const COLLAPSED_CONFIG_WIDTH = 36;
+
+export interface SlideTypeOption {
+  value: SlideType;
+  label: string;
+  description: string;
+  Icon: LucideIcon;
+}
+
+export const SLIDE_TYPE_OPTIONS: readonly SlideTypeOption[] = [
+  {
+    value: "slide",
+    label: "Slide",
+    description:
+      "A new top-level slide. Advances horizontally with the right arrow.",
+    Icon: LayoutTemplateIcon,
+  },
+  {
+    value: "sub-slide",
+    label: "Sub-slide",
+    description:
+      "Stacks vertically under the previous slide. Reached with the down arrow.",
+    Icon: Rows2Icon,
+  },
+  {
+    value: "fragment",
+    label: "Fragment",
+    description: "Reveals step-by-step on the current slide without advancing.",
+    Icon: CookieIcon,
+  },
+  {
+    value: "skip",
+    label: "Skip",
+    description:
+      "Hidden from the presentation. Still visible here in the editor.",
+    Icon: EyeOffIcon,
+  },
+];
+
+/**
+ * Lookup form of {@link SLIDE_TYPE_OPTIONS} for O(1) access by `SlideType`.
+ */
+export const SLIDE_TYPE_OPTIONS_BY_VALUE: Readonly<
+  Record<SlideType, SlideTypeOption>
+> = Object.fromEntries(
+  SLIDE_TYPE_OPTIONS.map((option) => [option.value, option]),
+) as Record<SlideType, SlideTypeOption>;
+
+interface DeckTransitionOption {
+  value: DeckTransition;
+  label: string;
+  description: string;
+}
+
+const DECK_TRANSITION_OPTIONS: DeckTransitionOption[] = [
+  { value: "none", label: "None", description: "No animation between slides." },
+  { value: "fade", label: "Fade", description: "Cross-fade between slides." },
+  {
+    value: "slide",
+    label: "Slide",
+    description: "Slides move horizontally / vertically.",
+  },
+  {
+    value: "convex",
+    label: "Convex",
+    description: "Rotate with a convex curve.",
+  },
+  {
+    value: "concave",
+    label: "Concave",
+    description: "Rotate with a concave curve.",
+  },
+  { value: "zoom", label: "Zoom", description: "Zoom into the next slide." },
+];
+
+const SlidesForm = ({
+  layout,
+  setLayout,
+  cellId,
+}: {
+  layout: SlidesLayout;
+  setLayout: (layout: SlidesLayout) => void;
+  cellId: CellId;
+}) => {
+  return (
+    <Tabs defaultValue="slide" className="flex flex-col flex-1 p-3 gap-3">
+      <TabsList className="grid grid-cols-2">
+        <TabsTrigger value="slide">Slide</TabsTrigger>
+        <TabsTrigger value="deck">Deck</TabsTrigger>
+      </TabsList>
+      <TabsContent value="slide" className="mt-0 flex-1">
+        <SlideConfigForm
+          layout={layout}
+          setLayout={setLayout}
+          cellId={cellId}
+        />
+      </TabsContent>
+      <TabsContent value="deck" className="mt-0 flex-1">
+        <DeckConfigForm layout={layout} setLayout={setLayout} />
+      </TabsContent>
+    </Tabs>
+  );
+};
+
+const SlideConfigForm = ({
+  layout,
+  setLayout,
+  cellId,
+}: {
+  layout: SlidesLayout;
+  setLayout: (layout: SlidesLayout) => void;
+  cellId: CellId;
+}) => {
+  const currentSlideType: SlideType =
+    layout.cells.get(cellId)?.type ?? DEFAULT_SLIDE_TYPE;
+
+  const handleSlideTypeChange = (value: SlideType) => {
+    const existingConfig = layout.cells.get(cellId);
+    const newCells = new Map(layout.cells);
+    newCells.set(cellId, { ...existingConfig, type: value });
+    setLayout({
+      ...layout,
+      cells: newCells,
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <span className="font-semibold text-sm">Slide type</span>
+      <RadioGroup
+        aria-label="Slide type"
+        value={currentSlideType}
+        onValueChange={(value) => handleSlideTypeChange(value as SlideType)}
+        className="flex flex-col gap-1.5"
+      >
+        {SLIDE_TYPE_OPTIONS.map(({ value, label, description, Icon }) => {
+          const isSelected = currentSlideType === value;
+          return (
+            <RadioGroupItem
+              key={value}
+              value={value}
+              className={cn(
+                "group h-auto w-full text-left rounded-md p-2.5 transition-colors shadow-none! border",
+                "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                isSelected
+                  ? "border-primary bg-primary/5"
+                  : "border-border bg-background hover:bg-accent/50 hover:border-foreground/30",
+              )}
+            >
+              <div className="flex items-start gap-2.5">
+                <span
+                  className={cn(
+                    "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded",
+                    isSelected
+                      ? "bg-primary/10 text-primary"
+                      : "bg-muted text-muted-foreground group-hover:text-foreground",
+                  )}
+                >
+                  <Icon className="h-3.5 w-3.5" />
+                </span>
+                <div>
+                  <p
+                    className={cn(
+                      "text-sm font-medium leading-tight",
+                      isSelected ? "text-primary" : "text-foreground",
+                    )}
+                  >
+                    {label}
+                  </p>
+                  <p className="mt-0.5 text-xs text-foreground/70">
+                    {description}
+                  </p>
+                </div>
+              </div>
+            </RadioGroupItem>
+          );
+        })}
+      </RadioGroup>
+    </div>
+  );
+};
+
+const DeckConfigForm = ({
+  layout,
+  setLayout,
+}: {
+  layout: SlidesLayout;
+  setLayout: (layout: SlidesLayout) => void;
+}) => {
+  const currentTransition: DeckTransition =
+    layout.deck?.transition ?? DEFAULT_DECK_TRANSITION;
+  const activeDescription = DECK_TRANSITION_OPTIONS.find(
+    (opt) => opt.value === currentTransition,
+  )?.description;
+
+  const handleTransitionChange = (value: DeckTransition) => {
+    setLayout({
+      ...layout,
+      deck: { ...layout.deck, transition: value },
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-1.5">
+        <label
+          htmlFor="deck-transition"
+          className="font-semibold text-sm text-foreground"
+        >
+          Transition
+        </label>
+        <Select
+          value={currentTransition}
+          onValueChange={(value) =>
+            handleTransitionChange(value as DeckTransition)
+          }
+        >
+          <SelectTrigger id="deck-transition" aria-label="Slide transition">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {DECK_TRANSITION_OPTIONS.map(({ value, label }) => (
+              <SelectItem key={value} value={value}>
+                {label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {activeDescription && (
+          <p className="text-xs text-foreground/70">{activeDescription}</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const SlideSidebar = ({
+  configWidth,
+  layout,
+  setLayout,
+  activeConfigCell,
+}: {
+  configWidth: number;
+  layout: SlidesLayout;
+  setLayout: (layout: SlidesLayout) => void;
+  activeConfigCell?: RuntimeCell;
+}) => {
+  const [isConfigOpen, setIsConfigOpen] = useState(false);
+
+  return (
+    <aside
+      className="h-full flex flex-col border-l border-border/60 bg-muted/20 transition-[width] duration-200 ease-out overflow-hidden"
+      style={{
+        width: isConfigOpen ? configWidth : COLLAPSED_CONFIG_WIDTH,
+      }}
+      aria-label="Slide configuration"
+    >
+      <header
+        className={cn(
+          "flex items-center h-9 shrink-0 border-b border-border/60",
+          isConfigOpen ? "justify-between px-2" : "justify-center px-0",
+        )}
+      >
+        {isConfigOpen && (
+          <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground pl-1">
+            Configuration
+          </span>
+        )}
+        <Tooltip content={isConfigOpen ? "Collapse panel" : "Expand panel"}>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 text-muted-foreground hover:text-foreground"
+            onClick={() => setIsConfigOpen(!isConfigOpen)}
+            aria-expanded={isConfigOpen}
+            aria-controls="slide-config-panel"
+          >
+            {isConfigOpen ? (
+              <PanelRightCloseIcon className="h-4 w-4" />
+            ) : (
+              <PanelRightOpenIcon className="h-4 w-4" />
+            )}
+          </Button>
+        </Tooltip>
+      </header>
+
+      {isConfigOpen && (
+        <div
+          id="slide-config-panel"
+          className="flex-1 overflow-y-auto overflow-x-hidden"
+        >
+          {activeConfigCell ? (
+            <SlidesForm
+              layout={layout}
+              setLayout={setLayout}
+              cellId={activeConfigCell.id}
+            />
+          ) : (
+            <div className="flex flex-col gap-1.5 p-3 text-xs text-muted-foreground">
+              <span className="font-semibold text-sm text-foreground">
+                No slides yet
+              </span>
+              <p>
+                Run a cell that produces output to add it to the deck. Slide
+                settings will appear here once a slide is selected.
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+    </aside>
+  );
+};

package/src/components/ui/radio-group.tsx

@@ -33,9 +33,11 @@ const RadioGroupItem = React.forwardRef<
       )}
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-[10px] w-[10px] fill-primary text-current" />
-      </RadioGroupPrimitive.Indicator>
+      {children ?? (
+        <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+          <Circle className="h-[10px] w-[10px] fill-primary text-current" />
+        </RadioGroupPrimitive.Indicator>
+      )}
     </RadioGroupPrimitive.Item>
   );
 });

package/src/core/cells/types.ts

@@ -119,6 +119,8 @@ export interface CellRuntimeState {
   serialization?: string | null;
 }
 
+export type RuntimeCell = CellRuntimeState & CellData;
+
 export type WithResponse<T> = T & {
   /**
    * This is not saved to the server, but we update this field

package/src/core/islands/__tests__/bridge.test.ts

@@ -10,6 +10,14 @@ import {
 } from "@/__tests__/branded";
 
 type Base64String = components["schemas"]["Base64String"];
+interface TestIslandApp {
+  id: string;
+  cells: { code: string; idx: number; output: string }[];
+}
+interface TestExportContext {
+  trusted: true;
+  notebookCode?: string;
+}
 
 // Mock browser APIs before any imports
 vi.stubGlobal(
@@ -33,8 +41,23 @@ class MockURL {
 vi.stubGlobal("URL", MockURL);
 
 // Mock the worker RPC before importing the bridge
-const mockBridge = vi.fn();
-const mockLoadPackages = vi.fn();
+const {
+  mockBridge,
+  mockLoadPackages,
+  mockStartSessionRequest,
+  mockParseMarimoIslandApps,
+  mockCreateMarimoFile,
+  mockGetMarimoExportContext,
+} = vi.hoisted(() => ({
+  mockBridge: vi.fn(),
+  mockLoadPackages: vi.fn(),
+  mockStartSessionRequest: vi.fn(),
+  mockParseMarimoIslandApps: vi.fn<() => TestIslandApp[]>(() => []),
+  mockCreateMarimoFile: vi.fn(),
+  mockGetMarimoExportContext: vi.fn<() => TestExportContext | undefined>(
+    () => undefined,
+  ),
+}));
 
 vi.mock("@/core/wasm/rpc", () => ({
   getWorkerRPC: () => ({
@@ -42,7 +65,7 @@ vi.mock("@/core/wasm/rpc", () => ({
       request: {
         bridge: mockBridge,
         loadPackages: mockLoadPackages,
-        startSession: vi.fn(),
+        startSession: mockStartSessionRequest,
       },
       send: {
         consumerReady: vi.fn(),
@@ -54,8 +77,8 @@ vi.mock("@/core/wasm/rpc", () => ({
 
 // Mock the parse module to avoid DOM dependencies
 vi.mock("../parse", () => ({
-  parseMarimoIslandApps: () => [],
-  createMarimoFile: vi.fn(),
+  parseMarimoIslandApps: mockParseMarimoIslandApps,
+  createMarimoFile: mockCreateMarimoFile,
 }));
 
 // Mock uuid to have predictable tokens
@@ -63,6 +86,10 @@ vi.mock("@/utils/uuid", () => ({
   generateUUID: () => "test-uuid-12345",
 }));
 
+vi.mock("@/core/static/export-context", () => ({
+  getMarimoExportContext: mockGetMarimoExportContext,
+}));
+
 // Mock getMarimoVersion
 vi.mock("@/core/meta/globals", () => ({
   getMarimoVersion: () => "0.0.0-test",
@@ -71,6 +98,7 @@ vi.mock("@/core/meta/globals", () => ({
 // Mock the jotai store
 vi.mock("@/core/state/jotai", () => ({
   store: {
+    get: vi.fn(),
     set: vi.fn(),
   },
 }));
@@ -83,9 +111,92 @@ describe("IslandsPyodideBridge", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    mockParseMarimoIslandApps.mockReturnValue([]);
+    mockCreateMarimoFile.mockReset();
+    mockGetMarimoExportContext.mockReturnValue(undefined);
     bridge = new IslandsPyodideBridge({ autoStartSessions: false });
   });
 
+  describe("startSessionsForAllApps", () => {
+    it("should prefer trusted export notebook code when there is exactly one reactive app", async () => {
+      mockParseMarimoIslandApps.mockReturnValue([
+        {
+          id: "app-1",
+          cells: [{ code: "x = 1", idx: 0, output: "<div>1</div>" }],
+        },
+      ]);
+      mockGetMarimoExportContext.mockReturnValue({
+        trusted: true,
+        notebookCode:
+          "import marimo\napp = marimo.App()\n@app.cell\ndef __():\n    x = 1\n    return",
+      });
+
+      await (
+        bridge as unknown as { startSessionsForAllApps(): Promise<void> }
+      ).startSessionsForAllApps();
+
+      expect(mockCreateMarimoFile).not.toHaveBeenCalled();
+      expect(mockStartSessionRequest).toHaveBeenCalledWith({
+        appId: "app-1",
+        code: "import marimo\napp = marimo.App()\n@app.cell\ndef __():\n    x = 1\n    return",
+      });
+    });
+
+    it("should keep synthesized per-app files for multiple reactive apps even when export context exists", async () => {
+      mockParseMarimoIslandApps.mockReturnValue([
+        {
+          id: "app-1",
+          cells: [{ code: "x = 1", idx: 0, output: "<div>1</div>" }],
+        },
+        {
+          id: "app-2",
+          cells: [{ code: "y = 2", idx: 0, output: "<div>2</div>" }],
+        },
+      ]);
+      mockGetMarimoExportContext.mockReturnValue({
+        trusted: true,
+        notebookCode: "full notebook should be ignored",
+      });
+      mockCreateMarimoFile
+        .mockReturnValueOnce("generated app 1")
+        .mockReturnValueOnce("generated app 2");
+
+      await (
+        bridge as unknown as { startSessionsForAllApps(): Promise<void> }
+      ).startSessionsForAllApps();
+
+      expect(mockCreateMarimoFile).toHaveBeenCalledTimes(2);
+      expect(mockStartSessionRequest).toHaveBeenNthCalledWith(1, {
+        appId: "app-1",
+        code: "generated app 1",
+      });
+      expect(mockStartSessionRequest).toHaveBeenNthCalledWith(2, {
+        appId: "app-2",
+        code: "generated app 2",
+      });
+    });
+
+    it("should synthesize a file for a single app when no trusted export context is present", async () => {
+      mockParseMarimoIslandApps.mockReturnValue([
+        {
+          id: "app-1",
+          cells: [{ code: "x = 1", idx: 0, output: "<div>1</div>" }],
+        },
+      ]);
+      mockCreateMarimoFile.mockReturnValue("generated app 1");
+
+      await (
+        bridge as unknown as { startSessionsForAllApps(): Promise<void> }
+      ).startSessionsForAllApps();
+
+      expect(mockCreateMarimoFile).toHaveBeenCalledTimes(1);
+      expect(mockStartSessionRequest).toHaveBeenCalledWith({
+        appId: "app-1",
+        code: "generated app 1",
+      });
+    });
+  });
+
   describe("sendComponentValues", () => {
     it("should include type field and token in control request", async () => {
       const request = {

package/src/core/islands/bridge.ts

@@ -10,6 +10,7 @@ import { generateUUID } from "@/utils/uuid";
 import type { CommandMessage, NotificationPayload } from "../kernel/messages";
 import type { EditRequests, RunRequests } from "../network/types";
 import { store as defaultStore } from "../state/jotai";
+import { getMarimoExportContext } from "../static/export-context";
 import { createMarimoFile, parseMarimoIslandApps } from "./parse";
 import { islandsInitializedAtom } from "./state";
 import type { WorkerSchema } from "./worker/worker";
@@ -123,8 +124,11 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
       `Starting sessions for ${apps.length} app(s):`,
       apps.map((a) => `${a.id} (${a.cells.length} cells)`),
     );
+    const exportContext =
+      apps.length === 1 ? getMarimoExportContext() : undefined;
+    const notebookCode = exportContext?.notebookCode;
     for (const app of apps) {
-      const file = createMarimoFile(app);
+      const file = notebookCode || createMarimoFile(app);
       Logger.debug(`App ${app.id} marimo file:\n`, file);
       this.startSession({
         code: file,

package/src/core/layout/layout.ts

@@ -84,7 +84,6 @@ export function getSerializedLayout() {
     return null;
   }
 
-  const data = layoutData[selectedLayout];
   const plugin = cellRendererPlugins.find(
     (plugin) => plugin.type === selectedLayout,
   );
@@ -92,8 +91,13 @@ export function getSerializedLayout() {
     Logger.error(`Unknown layout type: ${selectedLayout}`);
     return null;
   }
+  const cells = notebookCells(notebook);
+  // Fall back to the plugin's initial layout when the user has not yet
+  // interacted with this layout — otherwise serializers that expect a
+  // structured layout object crash on `undefined`.
+  const data = layoutData[selectedLayout] ?? plugin.getInitialLayout(cells);
   return {
     type: selectedLayout,
-    data: plugin.serializeLayout(data, notebookCells(notebook)),
+    data: plugin.serializeLayout(data, cells),
   };
 }