@marimo-team/islands 0.21.2-dev6 → 0.21.2-dev61

package/src/utils/createReducer.ts

@@ -27,6 +27,13 @@ type ReducerActions<RH extends ReducerHandlers<any>> = {
     : never;
 };
 
+/** Helper for typing middleware that receives dispatched actions. */
+export type DispatchedActionOf<T> = {
+  [Key in keyof T]: T[Key] extends (payload: infer P) => any
+    ? { type: Key; payload: P }
+    : never;
+}[keyof T & string];
+
 export interface ReducerCreatorResult<
   State,
   RH extends ReducerHandlers<State>,
@@ -80,21 +87,20 @@ export function createReducerAndAtoms<
   State,
   RH extends ReducerHandlers<NoInfer<State>>,
 >(initialState: () => State, reducers: RH, middleware?: Middleware<State>[]) {
+  const allMiddleware = [...(middleware ?? [])];
+  const addMiddleware = (mw: Middleware<State>) => {
+    allMiddleware.push(mw);
+  };
   const { reducer, createActions } = createReducer(initialState, reducers);
 
   const reducerWithMiddleware = (state: State, action: ReducerAction<any>) => {
     try {
       const newState = reducer(state, action);
-      if (middleware) {
-        for (const mw of middleware) {
-          try {
-            mw(state, newState, action);
-          } catch (error) {
-            Logger.error(
-              `Error in middleware for action ${action.type}:`,
-              error,
-            );
-          }
+      for (const mw of allMiddleware) {
+        try {
+          mw(state, newState, action);
+        } catch (error) {
+          Logger.error(`Error in middleware for action ${action.type}:`, error);
         }
       }
       return newState;
@@ -108,9 +114,17 @@ export function createReducerAndAtoms<
   // map of SetAtom => Actions
   const actionsMap = new WeakMap();
 
-  function useActions(): ReducerActions<RH> {
+  function useActions(
+    options: { skipMiddleware?: boolean } = {},
+  ): ReducerActions<RH> {
     const setState = useSetAtom(valueAtom);
 
+    if (options.skipMiddleware === true) {
+      return createActions((action: ReducerAction<any>) => {
+        setState((state: State) => reducer(state, action));
+      });
+    }
+
     if (!actionsMap.has(setState)) {
       actionsMap.set(
         setState,
@@ -126,6 +140,7 @@ export function createReducerAndAtoms<
 
   return {
     reducer: reducerWithMiddleware,
+    addMiddleware,
     createActions,
     valueAtom,
     useActions,

package/src/utils/download.ts

@@ -156,10 +156,11 @@ export async function downloadHTMLAsImage(opts: {
     // Get screenshot
     const dataUrl = await toPng(element);
     downloadByURL(dataUrl, Filenames.toPNG(filename));
-  } catch {
+  } catch (error) {
+    Logger.error("Error downloading as PNG", error);
     toast({
-      title: "Error",
-      description: "Failed to download as PNG.",
+      title: "Failed to download as PNG",
+      description: prettyError(error),
       variant: "danger",
     });
   } finally {

package/src/utils/html-to-image.ts

@@ -140,6 +140,11 @@ export const necessaryStyleProperties = [
   "cursor",
 ];
 
+// 1x1 transparent PNG as a fallback for images that fail to embed (e.g., cross-origin).
+// Without this, failed embeds leave external URLs in the cloned DOM, which taints the canvas.
+const TRANSPARENT_PIXEL =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQI12NgAAIABQABNjN9GQAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAA0lEQVQI12P4z8BQDwAEgAF/QualIQAAAABJRU5ErkJggg==";
+
 /**
  * Default options for html-to-image conversions.
  * These handle common edge cases like filtering out toolbars and logging errors.
@@ -162,6 +167,7 @@ export const defaultHtmlToImageOptions: HtmlToImageOptions = {
       return true;
     }
   },
+  imagePlaceholder: TRANSPARENT_PIXEL,
   onImageErrorHandler: (event) => {
     Logger.error("Error loading image:", event);
   },

package/src/utils/json/base64.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { components } from "@marimo-team/marimo-api";
 import type { NotificationMessageData } from "@/core/kernel/messages";
 import type { TypedString } from "../typed";
 
@@ -11,9 +12,9 @@ export type JsonString<T = unknown> = TypedString<"Json"> & {
 };
 
 /**
- * A base64-encoded string.
+ * A base64-encoded string — derived from the generated OpenAPI schema.
  */
-export type Base64String = TypedString<"Base64">;
+export type Base64String = components["schemas"]["Base64String"];
 
 /**
  * A data URL string.
@@ -120,7 +121,6 @@ export function dataViewToBase64(dataView: DataView): Base64String {
 export function safeExtractSetUIElementMessageBuffers(
   notification: NotificationMessageData<"send-ui-element-message">,
 ): readonly DataView[] {
-  // @ts-expect-error - TypeScript doesn't know that these strings are actually base64 strings
   const strs: Base64String[] = notification.buffers ?? [];
   return strs.map(base64ToDataView);
 }

package/src/utils/traceback.ts

@@ -98,10 +98,12 @@ export function getTracebackInfo(domNode: DOMNode): TracebackInfo | null {
           10,
         );
         if (domNode.firstChild.nodeValue?.includes("__marimo__")) {
-          const cellId = /__marimo__cell_(\w+)_/.exec(
+          const maybeCellId = /__marimo__cell_(\w+)_/.exec(
             domNode.firstChild.nodeValue,
-          )?.[1] as CellId;
-          if (cellId && lineNumber) {
+          )?.[1];
+          if (maybeCellId && lineNumber) {
+            // @ts-expect-error - Custom parser above will return valid cell ids
+            const cellId: CellId = maybeCellId;
             return { kind: "cell", cellId, lineNumber };
           }
         } else {