@marimo-team/islands 0.23.15-dev5 → 0.23.15-dev53

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

@@ -33,11 +33,14 @@ import { getReadonlyCodeDisplay } from "@/core/cells/readonly-code-display";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { CSSClasses, KnownQueryParams } from "@/core/constants";
-import type { MarimoError, OutputMessage } from "@/core/kernel/messages";
+import type { OutputMessage } from "@/core/kernel/messages";
 import { kernelStateAtom } from "@/core/kernel/state";
 import { useNotebookCodeAvailable } from "@/core/meta/code-visibility";
 import { showCodeInRunModeAtom } from "@/core/meta/state";
-import { isErrorMime } from "@/core/mime";
+import {
+  publishedCellClasses,
+  shouldHidePublishedCell,
+} from "@/core/cells/utils";
 import { type AppMode, kioskModeAtom } from "@/core/mode";
 import { useRequestClient } from "@/core/network/requests";
 import type { CellConfig } from "@/core/network/types";
@@ -362,12 +365,13 @@ const VerticalCell = memo(
     const className = cn(
       "marimo-cell",
       "hover-actions-parent empty:invisible",
-      {
-        published: published,
-        "has-error": errored,
-        stopped: stopped,
-        borderless: isPureMarkdown && !published,
-      },
+      published
+        ? publishedCellClasses({ errored, stopped })
+        : {
+            "has-error": errored,
+            stopped: stopped,
+            borderless: isPureMarkdown,
+          },
     );
 
     // Read mode and show code
@@ -419,19 +423,15 @@ const VerticalCell = memo(
       );
     }
 
-    const outputIsError = isErrorMime(output?.mimetype);
     // When show_tracebacks is enabled, show error outputs inline
     // instead of hiding them
-    const hasTraceback =
-      showErrorTracebacks &&
-      outputIsError &&
-      Array.isArray(output?.data) &&
-      output.data.some(
-        (e: MarimoError) =>
-          e.type === "exception" && "traceback" in e && e.traceback,
-      );
-    const hidden =
-      (errored || interrupted || stopped || outputIsError) && !hasTraceback;
+    const hidden = shouldHidePublishedCell({
+      errored,
+      interrupted,
+      stopped,
+      output,
+      showErrorTracebacks,
+    });
     if (hidden) {
       return null;
     }

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,
@@ -124,18 +127,6 @@ function useSlideDimensions(ref: React.RefObject<HTMLDivElement | null>) {
   return dims;
 }
 
-/**
- * Trigger a resize event on the window
- * Vega elements need to be re-measured when the container width changes.
- */
-function triggerResize(deck: RevealApi | null) {
-  if (deck?.getCurrentSlide()?.querySelector(".vega-embed, marimo-vega")) {
-    requestAnimationFrame(() => {
-      window.dispatchEvent(new Event("resize"));
-    });
-  }
-}
-
 // The speaker view renders this via innerHTML with `white-space: normal`, so
 // we materialize `\n` as `<br>` and a lone `---` line as `<hr>`.
 const NotesAside = ({ text }: { text: string }) => {
@@ -292,16 +283,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 +334,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 +525,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
@@ -536,6 +551,10 @@ const RevealSlidesComponent = ({
       transition: deckTransition,
       keyboardCondition: (event: KeyboardEvent) => !Events.fromInput(event),
       url: kioskUrl,
+      // reveal.js auto-switches to its scroll view for mobile.
+      // We disable this mode because it rewrites the slide DOM that
+      // `@revealjs/react` owns, which crashes on `reveal.sync()` re-renders.
+      scrollActivationWidth: 0,
     }),
     [width, height, deckTransition, kioskUrl],
   );
@@ -657,7 +676,6 @@ const RevealSlidesComponent = ({
 
   const handleSlideChange = useEvent(() => {
     reportCurrentCell();
-    triggerResize(deckRef.current);
   });
 
   useEventListener(document, "keydown", handleParkedNavKey, { capture: true });
@@ -704,6 +722,7 @@ const RevealSlidesComponent = ({
                   resolveShowCode={resolveShowCode}
                   isEditable={isEditable}
                   slideConfigs={layout.cells}
+                  contentStyle={slideContentStyle}
                 />
               );
             }
@@ -717,6 +736,7 @@ const RevealSlidesComponent = ({
                       resolveShowCode={resolveShowCode}
                       isEditable={isEditable}
                       slideConfigs={layout.cells}
+                      contentStyle={slideContentStyle}
                     />
                   );
                 })}
@@ -743,7 +763,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/components/ui/toast.tsx

@@ -34,7 +34,7 @@ const VARIANT_CLASSES = {
 type ToastVariant = keyof typeof VARIANT_CLASSES;
 
 const toastVariants = cva(
-  "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full",
+  "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-start justify-between gap-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full",
   {
     variants: {
       variant: VARIANT_CLASSES,
@@ -117,10 +117,18 @@ ToastTitle.displayName = ToastPrimitives.Title.displayName;
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
+>(({ className, onPointerDown, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("text-sm opacity-90", className)}
+    className={cn(
+      "max-h-48 overflow-auto text-sm opacity-90 whitespace-pre-wrap wrap-break-word select-text cursor-text",
+      className,
+    )}
+    // Keep swipe-to-dismiss from fighting text selection / scroll.
+    onPointerDown={(event) => {
+      event.stopPropagation();
+      onPointerDown?.(event);
+    }}
     {...props}
   />
 ));

package/src/components/ui/toaster.tsx

@@ -1,5 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import { useRef } from "react";
+import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { useToast } from "@/components/ui/use-toast";
+import { cn } from "@/utils/cn";
 import {
   Toast,
   ToastClose,
@@ -14,17 +18,69 @@ export const Toaster = () => {
 
   return (
     <ToastProvider>
-      {toasts.map(({ id, title, description, action, ...props }) => (
-        <Toast key={id} {...props}>
-          <div className="grid gap-1">
-            {title && <ToastTitle>{title}</ToastTitle>}
-            {description && <ToastDescription>{description}</ToastDescription>}
-          </div>
-          {action}
-          <ToastClose />
-        </Toast>
+      {toasts.map(({ id, title, description, action, variant, ...props }) => (
+        <ToastItem
+          key={id}
+          toastTitle={title}
+          toastDescription={description}
+          action={action}
+          variant={variant}
+          {...props}
+        />
       ))}
       <ToastViewport />
     </ToastProvider>
   );
 };
+
+type ToastItemProps = Omit<
+  ComponentPropsWithoutRef<typeof Toast>,
+  "title" | "children"
+> & {
+  toastTitle?: ReactNode;
+  toastDescription?: ReactNode;
+  action?: ReactElement;
+};
+
+const ToastItem = ({
+  toastTitle,
+  toastDescription,
+  action,
+  variant,
+  ...props
+}: ToastItemProps) => {
+  const descriptionRef = useRef<HTMLDivElement>(null);
+  // Show copy button for danger toasts without action, typically used for errors.
+  const showCopy = Boolean(toastDescription) && !action && variant === "danger";
+
+  return (
+    <Toast variant={variant} {...props}>
+      <div className="grid min-w-0 flex-1 gap-1">
+        {toastTitle && <ToastTitle>{toastTitle}</ToastTitle>}
+        {toastDescription && (
+          <ToastDescription ref={descriptionRef}>
+            {toastDescription}
+          </ToastDescription>
+        )}
+      </div>
+      {action}
+      {showCopy && (
+        <CopyClipboardIcon
+          tooltip="Copy error"
+          ariaLabel="Copy error"
+          className="h-4 w-4"
+          buttonClassName={cn(
+            "absolute right-8 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity",
+            "hover:text-foreground focus:opacity-100 focus:outline-hidden group-hover:opacity-100",
+            "group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-500 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
+          )}
+          value={() =>
+            descriptionRef.current?.innerText ??
+            (typeof toastDescription === "string" ? toastDescription : "")
+          }
+        />
+      )}
+      <ToastClose />
+    </Toast>
+  );
+};

package/src/core/ai/context/providers/error.ts

@@ -1,13 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { Completion } from "@codemirror/autocomplete";
-import { notebookAtom } from "@/core/cells/cells";
-import type { CellId } from "@/core/cells/ids";
-import { displayCellName } from "@/core/cells/names";
-import type { MarimoError, OutputMessage } from "@/core/kernel/messages";
-import { isErrorMime, isMarimoErrorsMime, isTracebackMime } from "@/core/mime";
+import {
+  type CellErrorEntry,
+  describeError,
+  formatSingleError,
+  getCellErrorEntries,
+} from "@/core/errors/error-entries";
 import type { JotaiStore } from "@/core/state/jotai";
-import { logNever } from "@/utils/assertNever";
 import { parseHtmlContent } from "@/utils/dom";
 import { PluralWord } from "@/utils/pluralize";
 import { type AIContextItem, AIContextProvider } from "../registry";
@@ -15,14 +15,6 @@ import { contextToXml } from "../utils";
 import { Sections } from "./common";
 import { formatDatasourceContextForCell } from "./datasource";
 
-export interface CellErrorEntry {
-  cellId: CellId;
-  cellName: string;
-  cellCode: string;
-  errorData: MarimoError[];
-  tracebackHtml?: string;
-}
-
 export type ErrorContextItemData =
   | {
       type: "all-errors";
@@ -38,150 +30,6 @@ export interface ErrorContextItem extends AIContextItem {
   data: ErrorContextItemData;
 }
 
-function parseCellErrorOutput(
-  output: OutputMessage,
-): Pick<CellErrorEntry, "errorData" | "tracebackHtml"> | null {
-  if (isMarimoErrorsMime(output.mimetype)) {
-    if (!Array.isArray(output.data)) {
-      return null;
-    }
-    const errorData = output.data.filter(
-      (error) => !error.type.includes("ancestor"),
-    );
-    if (errorData.length === 0) {
-      return null;
-    }
-    return { errorData };
-  }
-
-  if (isTracebackMime(output.mimetype)) {
-    if (typeof output.data !== "string" || output.data.length === 0) {
-      return null;
-    }
-    return { errorData: [], tracebackHtml: output.data };
-  }
-
-  return null;
-}
-
-function errorDataHasTraceback(errorData: MarimoError[]): boolean {
-  return errorData.some((error) => "traceback" in error && error.traceback);
-}
-
-function getTracebackFromConsole(
-  consoleOutputs: OutputMessage[] | undefined,
-): string | undefined {
-  const tracebackOutput = consoleOutputs?.find((output) =>
-    isTracebackMime(output.mimetype),
-  );
-  if (
-    !tracebackOutput ||
-    typeof tracebackOutput.data !== "string" ||
-    tracebackOutput.data.length === 0
-  ) {
-    return undefined;
-  }
-  return tracebackOutput.data;
-}
-
-function resolveTracebackHtml(
-  parsed: Pick<CellErrorEntry, "errorData" | "tracebackHtml">,
-  consoleOutputs: OutputMessage[] | undefined,
-): string | undefined {
-  if (parsed.tracebackHtml) {
-    return parsed.tracebackHtml;
-  }
-  if (errorDataHasTraceback(parsed.errorData)) {
-    return undefined;
-  }
-  return getTracebackFromConsole(consoleOutputs);
-}
-
-export function getCellErrorEntries(store: JotaiStore): CellErrorEntry[] {
-  const { cellIds, cellRuntime, cellData } = store.get(notebookAtom);
-  const entries: CellErrorEntry[] = [];
-
-  for (const [cellIndex, cellId] of cellIds.inOrderIds.entries()) {
-    const cell = cellRuntime[cellId];
-    const output = cell.output;
-    if (!output || !isErrorMime(output.mimetype)) {
-      continue;
-    }
-
-    const parsed = parseCellErrorOutput(output);
-    if (!parsed) {
-      continue;
-    }
-
-    const cellName = displayCellName(cellData[cellId].name, cellIndex);
-    // Prefer the code from the last execution: runtime errors correspond to
-    // the previous run, while `code` may already contain unsaved edits.
-    const cellCode = cellData[cellId].lastCodeRun ?? cellData[cellId].code;
-
-    entries.push({
-      cellId,
-      cellName,
-      cellCode,
-      errorData: parsed.errorData,
-      tracebackHtml: resolveTracebackHtml(parsed, cell.consoleOutputs),
-    });
-  }
-
-  return entries;
-}
-
-function describeError(error: MarimoError): string {
-  if (error.type === "setup-refs") {
-    return "The setup cell cannot have references";
-  }
-  if (error.type === "cycle") {
-    return "This cell is in a cycle";
-  }
-  if (error.type === "multiple-defs") {
-    return `The variable '${error.name}' was defined by another cell`;
-  }
-  if (error.type === "import-star") {
-    return error.msg;
-  }
-  if (error.type === "ancestor-stopped") {
-    return error.msg;
-  }
-  if (error.type === "ancestor-prevented") {
-    return error.msg;
-  }
-  if (error.type === "exception") {
-    return error.msg;
-  }
-  if (error.type === "strict-exception") {
-    return error.msg;
-  }
-  if (error.type === "interruption") {
-    return "This cell was interrupted and needs to be re-run";
-  }
-  if (error.type === "syntax") {
-    return error.msg;
-  }
-  if (error.type === "unknown") {
-    return error.msg;
-  }
-  if (error.type === "sql-error") {
-    return error.msg;
-  }
-  if (error.type === "internal") {
-    return error.msg || "An internal error occurred";
-  }
-  logNever(error);
-  return "Unknown error";
-}
-
-function formatSingleError(error: MarimoError): string {
-  let text = describeError(error);
-  if ("traceback" in error && error.traceback) {
-    text += `\n\nTraceback:\n${parseHtmlContent(error.traceback)}`;
-  }
-  return text;
-}
-
 function formatCellErrorDetails(
   entry: CellErrorEntry,
   store: JotaiStore,