@marimo-team/islands 0.23.15-dev10 → 0.23.15-dev12

package/package.json

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

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

@@ -42,6 +42,23 @@ describe("SlidesLayoutPlugin validator", () => {
       }).success,
     ).toBe(false);
   });
+
+  it("accepts each valid deck vertical alignment", () => {
+    for (const verticalAlign of ["top", "center", "bottom"]) {
+      expect(
+        SlidesLayoutPlugin.validator.safeParse({ deck: { verticalAlign } })
+          .success,
+      ).toBe(true);
+    }
+  });
+
+  it("rejects an unknown deck vertical alignment", () => {
+    expect(
+      SlidesLayoutPlugin.validator.safeParse({
+        deck: { verticalAlign: "middle" },
+      }).success,
+    ).toBe(false);
+  });
 });
 
 describe("SlidesLayoutPlugin deserializeLayout", () => {
@@ -268,6 +285,18 @@ const BACKWARDS_COMPAT_SNAPSHOTS: BackwardsCompatCase[] = [
       ],
     },
   },
+  {
+    // `verticalAlign` was added to DeckConfig.
+    label: "deck.verticalAlign round-trips through validate + (de)serialize",
+    input: {
+      cells: [{}],
+      deck: { transition: "fade", verticalAlign: "top" },
+    },
+    expected: {
+      deck: { transition: "fade", verticalAlign: "top" },
+      cellIds: ["a"],
+    },
+  },
 ];
 
 describe("SlidesLayoutPlugin backwards compatibility", () => {

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

@@ -23,8 +23,12 @@ const DeckTransitionSchema = z.enum([
 ]);
 export type DeckTransition = z.infer<typeof DeckTransitionSchema>;
 
+const DeckVerticalAlignSchema = z.enum(["top", "center", "bottom"]);
+export type DeckVerticalAlign = z.infer<typeof DeckVerticalAlignSchema>;
+
 const DeckConfigSchema = z.looseObject({
   transition: DeckTransitionSchema.optional(),
+  verticalAlign: DeckVerticalAlignSchema.optional(),
 });
 export type DeckConfig = z.infer<typeof DeckConfigSchema>;
 

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

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import {
+  type CSSProperties,
   startTransition,
   useEffect,
   useMemo,
@@ -26,6 +27,7 @@ import { Logger } from "@/utils/Logger";
 import "./slides.css";
 import "./reveal-slides.css";
 import type {
+  DeckVerticalAlign,
   SlideConfig,
   SlidesLayout,
   SlideType,
@@ -39,6 +41,7 @@ import {
   type ComposedSubslide,
 } from "./compose-slides";
 import {
+  DEFAULT_DECK_VERTICAL_ALIGN,
   DEFAULT_DECK_TRANSITION,
   DEFAULT_SLIDE_TYPE,
   SlideSidebar,
@@ -292,16 +295,38 @@ export function useParkedPreview(options: {
   };
 }
 
+/**
+ * Margin style that positions a slide's content vertically within the
+ * full-height slide. The content is a flex item, so the vertical margins decide
+ * where the free space lands: `auto` on both sides centers it, while pinning one
+ * side to `0` pushes content to the top or bottom. The horizontal `20px` keeps
+ * content off the slide edges regardless of alignment.
+ */
+function resolveSlideContentStyle(
+  verticalAlign: DeckVerticalAlign | undefined,
+): CSSProperties {
+  switch (verticalAlign ?? DEFAULT_DECK_VERTICAL_ALIGN) {
+    case "top":
+      return { margin: "0 20px auto" };
+    case "bottom":
+      return { margin: "auto 20px 0" };
+    default:
+      return { margin: "auto 20px" };
+  }
+}
+
 const SubslideView = ({
   subslide,
   resolveShowCode,
   isEditable,
   slideConfigs,
+  contentStyle,
 }: {
   subslide: ComposedSubslide<RuntimeCell>;
   resolveShowCode: (cellId: CellId) => boolean;
   isEditable: boolean;
   slideConfigs: ReadonlyMap<CellId, SlideConfig>;
+  contentStyle: CSSProperties;
 }) => {
   const { slideLevel, cumulativeByBlock } = buildSubslideNotes(
     subslide,
@@ -321,9 +346,7 @@ const SubslideView = ({
               ? "mo-slide-content flex flex-col gap-3"
               : "mo-slide-content"
           }
-          style={{
-            margin: "auto 20px",
-          }}
+          style={contentStyle}
         >
           {subslide.blocks.map((block, i) => {
             const rendered = block.cells.map((cell) => {
@@ -514,6 +537,10 @@ const RevealSlidesComponent = ({
   );
 
   const deckTransition = layout.deck?.transition ?? DEFAULT_DECK_TRANSITION;
+  const slideContentStyle = resolveSlideContentStyle(
+    layout.deck?.verticalAlign,
+  );
+
   // Reveal's Notes plugin iframes the deck for the current/upcoming-slide
   // previews. We load the same URL but as a read-only kiosk client with the
   // app chrome hidden, which `<SlidesLayoutRenderer>` interprets the same as
@@ -704,6 +731,7 @@ const RevealSlidesComponent = ({
                   resolveShowCode={resolveShowCode}
                   isEditable={isEditable}
                   slideConfigs={layout.cells}
+                  contentStyle={slideContentStyle}
                 />
               );
             }
@@ -717,6 +745,7 @@ const RevealSlidesComponent = ({
                       resolveShowCode={resolveShowCode}
                       isEditable={isEditable}
                       slideConfigs={layout.cells}
+                      contentStyle={slideContentStyle}
                     />
                   );
                 })}
@@ -743,7 +772,7 @@ const RevealSlidesComponent = ({
                     ? "mo-slide-content flex flex-col gap-3"
                     : "mo-slide-content"
                 }
-                style={{ margin: "auto 20px" }}
+                style={slideContentStyle}
               >
                 <ParkedPreviewContent
                   cell={parkedPreviewCell}

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

@@ -23,6 +23,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type { CellId } from "@/core/cells/ids";
 import { cn } from "@/utils/cn";
 import type {
+  DeckVerticalAlign,
   DeckTransition,
   SlidesLayout,
   SlideType,
@@ -37,6 +38,7 @@ import { jotaiJsonStorage } from "@/utils/storage/jotai";
 
 export const DEFAULT_SLIDE_TYPE: SlideType = "slide";
 export const DEFAULT_DECK_TRANSITION: DeckTransition = "slide";
+export const DEFAULT_DECK_VERTICAL_ALIGN: DeckVerticalAlign = "center";
 const COLLAPSED_CONFIG_WIDTH = 36;
 const slideConfigOpenAtom = atomWithStorage<boolean>(
   "marimo:slides:config-open",
@@ -118,6 +120,30 @@ const DECK_TRANSITION_OPTIONS: DeckTransitionOption[] = [
   { value: "zoom", label: "Zoom", description: "Zoom into the next slide." },
 ];
 
+interface DeckVerticalAlignOption {
+  value: DeckVerticalAlign;
+  label: string;
+  description: string;
+}
+
+const DECK_VERTICAL_ALIGN_OPTIONS: DeckVerticalAlignOption[] = [
+  {
+    value: "center",
+    label: "Center",
+    description: "Vertically center each slide's content.",
+  },
+  {
+    value: "top",
+    label: "Top",
+    description: "Align content to the top, like the cell view.",
+  },
+  {
+    value: "bottom",
+    label: "Bottom",
+    description: "Align content to the bottom of each slide.",
+  },
+];
+
 const SlidesForm = ({
   layout,
   setLayout,
@@ -300,6 +326,12 @@ const DeckConfigForm = ({
     (opt) => opt.value === currentTransition,
   )?.description;
 
+  const currentVerticalAlign: DeckVerticalAlign =
+    layout.deck?.verticalAlign ?? DEFAULT_DECK_VERTICAL_ALIGN;
+  const activeVerticalAlignDescription = DECK_VERTICAL_ALIGN_OPTIONS.find(
+    (opt) => opt.value === currentVerticalAlign,
+  )?.description;
+
   const handleTransitionChange = (value: DeckTransition) => {
     setLayout({
       ...layout,
@@ -307,6 +339,13 @@ const DeckConfigForm = ({
     });
   };
 
+  const handleVerticalAlignChange = (value: DeckVerticalAlign) => {
+    setLayout({
+      ...layout,
+      deck: { ...layout.deck, verticalAlign: value },
+    });
+  };
+
   return (
     <div className="flex flex-col gap-3">
       <div className="flex flex-col gap-1.5">
@@ -337,6 +376,39 @@ const DeckConfigForm = ({
           <p className="text-xs text-foreground/70">{activeDescription}</p>
         )}
       </div>
+      <div className="flex flex-col gap-1.5">
+        <label
+          htmlFor="deck-vertical-align"
+          className="font-semibold text-sm text-foreground"
+        >
+          Vertical alignment
+        </label>
+        <Select
+          value={currentVerticalAlign}
+          onValueChange={(value) =>
+            handleVerticalAlignChange(value as DeckVerticalAlign)
+          }
+        >
+          <SelectTrigger
+            id="deck-vertical-align"
+            aria-label="Vertical alignment"
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {DECK_VERTICAL_ALIGN_OPTIONS.map(({ value, label }) => (
+              <SelectItem key={value} value={value}>
+                {label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {activeVerticalAlignDescription && (
+          <p className="text-xs text-foreground/70">
+            {activeVerticalAlignDescription}
+          </p>
+        )}
+      </div>
     </div>
   );
 };

package/src/plugins/impl/anywidget/__tests__/host.test.ts

@@ -277,25 +277,22 @@ describe("WidgetBinding receives a host in render props", () => {
   });
 });
 
-describe("host-mounted views hydrate like display-mounted ones", () => {
-  it("replays current state to a child's render listeners", async () => {
-    const childId = asModelId("host-hydration-child");
+describe("host-mounted views", () => {
+  it("render with the child's current model state", async () => {
+    const childId = asModelId("host-child-state");
     const parentController = new AbortController();
     const getModuleSpy = vi.spyOn(WIDGET_DEF_REGISTRY, "getModule");
     try {
       const childWidget = {
         render: vi.fn(({ model, el }) => {
-          el.textContent = "count is 5";
-          model.on("change:count", () => {
-            el.textContent = `count is ${model.get("count")}`;
-          });
+          el.textContent = `count is ${model.get("count")}`;
         }),
       };
       const childModel = new Model<ModelState>({ count: 8 }, createMockComm());
       WIDGET_REGISTRY.setModel(childId, childModel);
       WIDGET_REGISTRY.setSpec(childId, {
-        url: "./@file/10-host-hydration-child.js",
-        hash: "hash-host-hydration-child",
+        url: "./@file/10-host-child-state.js",
+        hash: "hash-host-child-state",
       });
       getModuleSpy.mockResolvedValue({ default: childWidget });
 

package/src/plugins/impl/anywidget/__tests__/widget-binding.test.ts

@@ -337,13 +337,12 @@ describe("WidgetBinding", () => {
       { el: document.createElement("div") },
       { signal: controller.signal },
     );
-    // Called once by the hydration replay at mount, once by the set.
     model.set("count", 1);
-    expect(onCount).toHaveBeenCalledTimes(2);
+    expect(onCount).toHaveBeenCalledTimes(1);
 
     controller.abort();
     model.set("count", 2);
-    expect(onCount).toHaveBeenCalledTimes(2);
+    expect(onCount).toHaveBeenCalledTimes(1);
   });
 
   it("should auto-clear initialize listeners on destroy", async () => {
@@ -366,92 +365,54 @@ describe("WidgetBinding", () => {
   });
 });
 
-describe("WidgetBinding hydration replay", () => {
-  it("replays current state to render listeners exactly once", async () => {
+describe("WidgetBinding render listeners", () => {
+  it("fire only for changes after mount, never for pre-existing state", async () => {
     const model = new Model<ModelState>({ count: 8 }, createMockComm());
-    const el = document.createElement("div");
-    const widgetDef = {
-      render: vi.fn(({ model, el }) => {
-        // A widget view that starts with a local default and relies on
-        // change events for hydration.
-        el.textContent = "count is 5";
-        model.on("change:count", () => {
-          el.textContent = `count is ${model.get("count")}`;
-        });
-      }),
-    };
-    const binding = await createBinding(widgetDef, model);
-
-    const controller = new AbortController();
-    await binding.createView({ el }, { signal: controller.signal });
-    expect(el.textContent).toBe("count is 8");
-  });
-
-  it("does not re-fire listeners of already-mounted views", async () => {
-    // Mounting view B must not double-paint view A: the replay is
-    // scoped to the listeners the new render attached.
-    const model = new Model<ModelState>({ count: 0 }, createMockComm());
-    const listeners: Array<ReturnType<typeof vi.fn>> = [];
+    const onCount = vi.fn();
+    const onAnyChange = vi.fn();
     const widgetDef = {
       render: vi.fn(({ model }) => {
-        const listener = vi.fn();
-        listeners.push(listener);
-        model.on("change:count", listener);
+        model.on("change:count", onCount);
+        model.on("change", onAnyChange);
       }),
     };
     const binding = await createBinding(widgetDef, model);
     const controller = new AbortController();
-
     await binding.createView(
       { el: document.createElement("div") },
       { signal: controller.signal },
     );
-    expect(listeners[0]).toHaveBeenCalledTimes(1);
+    expect(onCount).not.toHaveBeenCalled();
+    expect(onAnyChange).not.toHaveBeenCalled();
 
-    await binding.createView(
-      { el: document.createElement("div") },
-      { signal: controller.signal },
-    );
-    // View B's listener hydrated once; view A's was left alone.
-    expect(listeners[1]).toHaveBeenCalledTimes(1);
-    expect(listeners[0]).toHaveBeenCalledTimes(1);
+    model.set("count", 9);
+    expect(onCount).toHaveBeenCalledTimes(1);
+    expect(onCount).toHaveBeenCalledWith(9);
   });
 
-  it("replays the any-change event to its listeners", async () => {
-    const model = new Model<ModelState>({ count: 1 }, createMockComm());
-    const onAnyChange = vi.fn();
+  it("mounting a second view does not fire the first view's listeners", async () => {
+    const model = new Model<ModelState>({ count: 0 }, createMockComm());
+    const listeners: Array<ReturnType<typeof vi.fn>> = [];
     const widgetDef = {
       render: vi.fn(({ model }) => {
-        model.on("change", onAnyChange);
+        const listener = vi.fn();
+        listeners.push(listener);
+        model.on("change:count", listener);
       }),
     };
     const binding = await createBinding(widgetDef, model);
     const controller = new AbortController();
+
     await binding.createView(
       { el: document.createElement("div") },
       { signal: controller.signal },
     );
-    expect(onAnyChange).toHaveBeenCalledTimes(1);
-  });
-
-  it("does not replay initialize listeners", async () => {
-    // The guarantee is per-view: initialize listeners existed before
-    // any view, and replaying at them would fire once per mount.
-    const model = new Model<ModelState>({ count: 1 }, createMockComm());
-    const initListener = vi.fn();
-    const widgetDef = {
-      initialize: vi.fn(({ model }) => {
-        model.on("change:count", initListener);
-      }),
-      render: vi.fn(),
-    };
-    const binding = await createBinding(widgetDef, model);
-    const controller = new AbortController();
     await binding.createView(
       { el: document.createElement("div") },
       { signal: controller.signal },
     );
-    expect(initListener).not.toHaveBeenCalled();
+    expect(listeners[0]).not.toHaveBeenCalled();
+    expect(listeners[1]).not.toHaveBeenCalled();
   });
 
   it("clears the element before rendering into it", async () => {

package/src/plugins/impl/anywidget/model-proxy.ts

@@ -5,15 +5,6 @@ import type { ModelState } from "./types";
 
 type ModelEventCallback = Parameters<AnyModel<ModelState>["on"]>[1];
 
-/**
- * A listener registered through a model proxy (see the hydration
- * replay in `WidgetBinding.createView`).
- */
-export interface ProxyRegistration {
-  event: string;
-  callback: ModelEventCallback;
-}
-
 /**
  * Wrap a model so every `on()` call from inside `initialize` or `render`
  * is auto-tied to a lifetime `AbortSignal`. When the signal aborts,
@@ -27,14 +18,11 @@ export interface ProxyRegistration {
  * The proxy is purely a host-side ergonomic helper. The widget author
  * still writes `model.on("change:foo", handler)` exactly as before; the
  * cleanup signal is supplied transparently.
- *
- * `onRegister`, when given, observes each `on()` registration.
  */
 // oxlint-disable-next-line marimo/prefer-object-params -- concise internal helper used at protocol call sites
 export function modelProxy<T extends ModelState>(
   model: AnyModel<T>,
   signal: AbortSignal,
-  onRegister?: (registration: ProxyRegistration) => void,
 ): AnyModel<T> {
   return {
     get(key) {
@@ -55,7 +43,6 @@ export function modelProxy<T extends ModelState>(
       signal.addEventListener("abort", () => model.off(name, callback), {
         once: true,
       });
-      onRegister?.({ event: name, callback });
     },
     off(name?: string | null, callback?: ModelEventCallback | null): void {
       model.off(name ?? null, callback ?? null);

package/src/plugins/impl/anywidget/widget-binding.ts

@@ -12,7 +12,7 @@ import { isTrustedVirtualFileUrl } from "@/plugins/core/trusted-url";
 import { Logger } from "@/utils/Logger";
 import type { Host } from "./host";
 import type { Model } from "./model";
-import { modelProxy, type ProxyRegistration } from "./model-proxy";
+import { modelProxy } from "./model-proxy";
 import type { ModelState } from "./types";
 
 export const experimental: Experimental = {
@@ -266,9 +266,8 @@ export class WidgetBinding<T extends ModelState = ModelState> {
    * when the caller's `signal` fires or the binding is destroyed, and
    * listeners registered inside `render` auto-clear on abort.
    *
-   * Hydration guarantee: listeners attached during `render` observe
-   * current model state exactly once, after `render` settles. Scoped
-   * to this view's listeners; re-firing at other views double-paints.
+   * `render` reads current state via `model.get`; change listeners
+   * observe only subsequent changes, matching Jupyter semantics.
    */
   async createView(
     target: { el: HTMLElement },
@@ -305,11 +304,8 @@ export class WidgetBinding<T extends ModelState = ModelState> {
     // Each view gets a host scoped to its own signal so child views tear
     // down with this view.
     const host = this.#createHost(renderSignal);
-    const registrations: ProxyRegistration[] = [];
     const renderCleanup = await widget.render({
-      model: modelProxy(this.#model, renderSignal, (registration) =>
-        registrations.push(registration),
-      ),
+      model: modelProxy(this.#model, renderSignal),
       el: target.el,
       experimental,
       signal: renderSignal,
@@ -333,7 +329,6 @@ export class WidgetBinding<T extends ModelState = ModelState> {
         once: true,
       });
     }
-    this.#replayState(registrations, renderSignal);
   }
 
   #trackCleanup(cleanup: Cleanup, reason: string): Promise<void> {
@@ -343,31 +338,6 @@ export class WidgetBinding<T extends ModelState = ModelState> {
     return task;
   }
 
-  /**
-   * The hydration guarantee documented on `createView`.
-   */
-  #replayState(
-    registrations: readonly ProxyRegistration[],
-    renderSignal: AbortSignal,
-  ): void {
-    const changePrefix = "change:";
-    for (const { event, callback } of registrations) {
-      if (renderSignal.aborted) {
-        return;
-      }
-      try {
-        if (event.startsWith(changePrefix)) {
-          const key = event.slice(changePrefix.length);
-          callback(this.#model.get(key));
-        } else if (event === "change") {
-          callback();
-        }
-      } catch (error) {
-        Logger.error("[WidgetBinding] Error replaying state", error);
-      }
-    }
-  }
-
   /**
    * Destroy this generation, running initialize/render cleanups and
    * clearing listeners registered through its model proxies.