@marimo-team/islands 0.21.2-dev2 → 0.21.2-dev21

package/package.json

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

package/src/components/app-config/user-config-form.tsx

@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { merge } from "lodash-es";
 import {
   AlertTriangleIcon,
   BrainIcon,
@@ -287,10 +288,10 @@ export const UserConfigForm: React.FC = () => {
       dirtyValues.ai = setAiModels(values.ai, dirtyValues.ai);
     }
 
-    await saveUserConfig({ config: dirtyValues }).then(() => {
-      // Update local state with form values
-      setConfig((prev) => ({ ...prev, ...values }));
-    });
+    await saveUserConfig({ config: dirtyValues });
+    // Only apply the changed keys; this avoids stale request responses
+    // overwriting newer config changes.
+    setConfig((prev) => merge({}, prev, dirtyValues));
   };
   const onSubmit = useDebouncedCallback(onSubmitNotDebounced, FORM_DEBOUNCE);
 

package/src/components/ui/range-slider.tsx

@@ -18,14 +18,116 @@ const RangeSlider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
     valueMap: (sliderValue: number) => number;
+    steps?: number[];
   }
 >(({ className, valueMap, ...props }, ref) => {
   const [open, openActions] = useBoolean(false);
   const { locale } = useLocale();
 
+  const isDraggingRange = React.useRef(false);
+  const dragStartX = React.useRef(0);
+  const dragStartY = React.useRef(0);
+  const dragStartValue = React.useRef<number[]>([]);
+  const currentDragValue = React.useRef<number[]>([]);
+  const rootRef =
+    React.useRef<React.ElementRef<typeof SliderPrimitive.Root>>(null);
+  const trackRef = React.useRef<HTMLSpanElement>(null);
+  const dragTrackRect = React.useRef<DOMRect | null>(null);
+
+  const mergedRef = React.useCallback(
+    (node: React.ElementRef<typeof SliderPrimitive.Root>) => {
+      rootRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref],
+  );
+
+  const handleRangePointerDown = (e: React.PointerEvent<HTMLSpanElement>) => {
+    if (!props.value || props.value.length !== 2) {
+      return;
+    }
+    if (props.disabled) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+
+    isDraggingRange.current = true;
+    dragStartX.current = e.clientX;
+    dragStartY.current = e.clientY;
+    dragStartValue.current = [...props.value];
+    currentDragValue.current = [...props.value];
+    dragTrackRect.current = trackRef.current?.getBoundingClientRect() ?? null;
+
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  };
+
+  const handleRangePointerMove = (e: React.PointerEvent<HTMLSpanElement>) => {
+    if (!isDraggingRange.current) {
+      return;
+    }
+    e.stopPropagation();
+
+    const trackRect = dragTrackRect.current;
+    if (!trackRect) {
+      return;
+    }
+
+    const isVertical = props.orientation === "vertical";
+    const min = props.min ?? 0;
+    const max = props.max ?? 100;
+    const totalRange = max - min;
+
+    let delta: number;
+    if (isVertical) {
+      const trackLength = trackRect.height;
+      delta = -((e.clientY - dragStartY.current) / trackLength) * totalRange;
+    } else {
+      const trackLength = trackRect.width;
+      delta = ((e.clientX - dragStartX.current) / trackLength) * totalRange;
+    }
+
+    const [origLeft, origRight] = dragStartValue.current;
+    const rangeWidth = origRight - origLeft;
+
+    const steps = props.steps;
+    const step: number =
+      steps && steps.length > 1
+        ? Math.min(...steps.slice(1).map((s, i) => s - steps[i]))
+        : (props.step ?? 1);
+    const snappedDelta = Math.round(delta / step) * step;
+
+    const clampedDelta = Math.max(
+      min - origLeft,
+      Math.min(max - origRight, snappedDelta),
+    );
+
+    const newLeft = origLeft + clampedDelta;
+    const newRight = newLeft + rangeWidth;
+
+    currentDragValue.current = [newLeft, newRight];
+    props.onValueChange?.([newLeft, newRight]);
+  };
+
+  const handleRangePointerUp = (e: React.PointerEvent<HTMLSpanElement>) => {
+    if (!isDraggingRange.current) {
+      return;
+    }
+    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+    isDraggingRange.current = false;
+
+    if (currentDragValue.current.length === 2) {
+      props.onValueCommit?.(currentDragValue.current);
+    }
+  };
+
   return (
     <SliderPrimitive.Root
-      ref={ref}
+      ref={mergedRef}
       className={cn(
         "relative flex touch-none select-none hover:cursor-pointer",
         "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:items-center",
@@ -36,6 +138,7 @@ const RangeSlider = React.forwardRef<
       {...props}
     >
       <SliderPrimitive.Track
+        ref={trackRef}
         data-testid="track"
         className={cn(
           "relative grow overflow-hidden rounded-full bg-slate-200 dark:bg-accent/60",
@@ -50,7 +153,11 @@ const RangeSlider = React.forwardRef<
             "data-[orientation=horizontal]:h-full",
             "data-[orientation=vertical]:w-full",
             "data-disabled:opacity-50",
+            "hover:cursor-grab active:cursor-grabbing",
           )}
+          onPointerDown={handleRangePointerDown}
+          onPointerMove={handleRangePointerMove}
+          onPointerUp={handleRangePointerUp}
         />
       </SliderPrimitive.Track>
       <TooltipProvider>

package/src/core/codemirror/lsp/notebook-lsp.ts

@@ -178,6 +178,8 @@ export class NotebookLanguageServerClient implements ILanguageServerClient {
     string,
     Promise<LSP.CompletionItem>
   >(10);
+  private latestDiagnosticsVersion: number | null = null;
+  private forwardedDiagnosticsVersion = 0;
 
   constructor(
     client: ILanguageServerClient,
@@ -270,6 +272,8 @@ export class NotebookLanguageServerClient implements ILanguageServerClient {
 
     // Get the current document state
     const { lens, version } = this.snapshotter.snapshot();
+    this.latestDiagnosticsVersion = null;
+    this.forwardedDiagnosticsVersion = 0;
 
     // Re-open the merged document with the LSP server
     // This sends a textDocument/didOpen for the entire notebook
@@ -768,13 +772,34 @@ export class NotebookLanguageServerClient implements ILanguageServerClient {
         | { method: "other"; params: unknown },
     ) => {
       if (notification.method === "textDocument/publishDiagnostics") {
+        const incomingVersion = notification.params.version;
+        if (incomingVersion != null) {
+          const latestVersion = this.latestDiagnosticsVersion;
+          if (
+            latestVersion !== null &&
+            Number.isFinite(incomingVersion) &&
+            incomingVersion < latestVersion
+          ) {
+            Logger.debug(
+              "[lsp] dropping stale diagnostics notification",
+              notification,
+            );
+            return;
+          }
+          this.latestDiagnosticsVersion = incomingVersion;
+        }
+
         Logger.debug("[lsp] handling diagnostics", notification);
         // Use the correct lens by version
         const payload = this.snapshotter.getLatestSnapshot();
 
         const diagnostics = notification.params.diagnostics;
 
-        const { lens, version: cellVersion } = payload;
+        const { lens } = payload;
+        // Forward diagnostics with a strictly increasing version so downstream
+        // plugin updates/clears reliably, even when server repeats the same
+        // document version across multiple publishDiagnostics notifications.
+        const diagnosticsVersion = ++this.forwardedDiagnosticsVersion;
 
         // Pre-partition diagnostics by cell
         const diagnosticsByCellId = new Map<CellId, LSP.Diagnostic[]>();
@@ -817,7 +842,7 @@ export class NotebookLanguageServerClient implements ILanguageServerClient {
             params: {
               ...notification.params,
               uri: cellDocumentUri,
-              version: cellVersion,
+              version: diagnosticsVersion,
               diagnostics: cellDiagnostics,
             },
           });
@@ -832,6 +857,7 @@ export class NotebookLanguageServerClient implements ILanguageServerClient {
               method: "textDocument/publishDiagnostics",
               params: {
                 uri: cellDocumentUri,
+                version: diagnosticsVersion,
                 diagnostics: [],
               },
             });

package/src/css/md.css

@@ -374,6 +374,13 @@ button .prose.prose {
   @apply p-4 pt-0;
 }
 
+/* Restore proper list indentation inside details blocks.
+   The p-4 above overrides prose's padding-inline-start for bullet space.
+   This ensures bullets render correctly with list-style-position: outside. */
+.markdown details > :is(ul, ol) {
+  padding-inline-start: 2.5rem;
+}
+
 .markdown .codehilite {
   background-color: var(--slate-2);
   border-radius: 4px;

package/src/plugins/core/sanitize-html.ts

@@ -2,28 +2,35 @@
 import DOMPurify, { type Config } from "dompurify";
 
 // preserve target=_blank https://github.com/cure53/DOMPurify/issues/317#issuecomment-912474068
-const TEMPORARY_ATTRIBUTE = "data-temp-href-target";
-DOMPurify.addHook("beforeSanitizeAttributes", (node) => {
-  if (node.tagName === "A") {
-    if (!node.hasAttribute("target")) {
-      node.setAttribute("target", "_self");
-    }
+// Guard for non-browser environments (e.g. Node.js in the marimo-lsp extension)
+// where `document` is not available.
+if (typeof document !== "undefined") {
+  const TEMPORARY_ATTRIBUTE = "data-temp-href-target";
+  DOMPurify.addHook("beforeSanitizeAttributes", (node) => {
+    if (node.tagName === "A") {
+      if (!node.hasAttribute("target")) {
+        node.setAttribute("target", "_self");
+      }
 
-    if (node.hasAttribute("target")) {
-      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute("target") || "");
+      if (node.hasAttribute("target")) {
+        node.setAttribute(
+          TEMPORARY_ATTRIBUTE,
+          node.getAttribute("target") || "",
+        );
+      }
     }
-  }
-});
+  });
 
-DOMPurify.addHook("afterSanitizeAttributes", (node) => {
-  if (node.tagName === "A" && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
-    node.setAttribute("target", node.getAttribute(TEMPORARY_ATTRIBUTE) || "");
-    node.removeAttribute(TEMPORARY_ATTRIBUTE);
-    if (node.getAttribute("target") === "_blank") {
-      node.setAttribute("rel", "noopener noreferrer");
+  DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+    if (node.tagName === "A" && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+      node.setAttribute("target", node.getAttribute(TEMPORARY_ATTRIBUTE) || "");
+      node.removeAttribute(TEMPORARY_ATTRIBUTE);
+      if (node.getAttribute("target") === "_blank") {
+        node.setAttribute("rel", "noopener noreferrer");
+      }
     }
-  }
-});
+  });
+}
 
 /**
  * This removes script tags, form tags, iframe tags, and other potentially dangerous tags

package/src/plugins/impl/SliderPlugin.tsx

@@ -152,9 +152,7 @@ const SliderComponent = ({
                 nextValue = Number(start);
               }
               setInternalValue(nextValue);
-              if (!debounce) {
-                setValue(nextValue);
-              }
+              setValue(nextValue);
             }}
             minValue={start}
             maxValue={stop}

package/src/plugins/impl/__tests__/SliderPlugin.test.tsx

@@ -0,0 +1,120 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { z } from "zod";
+import { SetupMocks } from "@/__mocks__/common";
+import { initialModeAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+import type { IPluginProps } from "../../types";
+import { SliderPlugin } from "../SliderPlugin";
+
+SetupMocks.resizeObserver();
+
+describe("SliderPlugin", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    store.set(initialModeAtom, "edit");
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  const createProps = (
+    debounce: boolean,
+    includeInput: boolean,
+    setValue: ReturnType<typeof vi.fn>,
+  ): IPluginProps<number, z.infer<typeof SliderPlugin.prototype.validator>> => {
+    return {
+      host: document.createElement("div"),
+      value: 5,
+      setValue,
+      data: {
+        initialValue: 5,
+        start: 0,
+        stop: 10,
+        step: 1,
+        label: "Test Slider",
+        debounce,
+        orientation: "horizontal" as const,
+        showValue: false,
+        fullWidth: false,
+        includeInput,
+        steps: null,
+      },
+      functions: {},
+    };
+  };
+
+  it("slider triggers setValue immediately when debounce is false", () => {
+    const plugin = new SliderPlugin();
+    const setValue = vi.fn();
+    const props = createProps(false, false, setValue);
+    const { container } = render(plugin.render(props));
+
+    act(() => {
+      vi.advanceTimersByTime(0);
+    });
+
+    const thumb = container.querySelector('[role="slider"]');
+    expect(thumb).toBeTruthy();
+
+    // Radix UI Slider updates on keyboard ArrowRight/ArrowLeft
+    act(() => {
+      (thumb as HTMLElement)?.focus();
+      fireEvent.keyDown(thumb!, { key: "ArrowRight" });
+    });
+
+    expect(setValue).toHaveBeenCalledWith(6);
+  });
+
+  it("slider does not trigger setValue immediately when debounce is true", () => {
+    const plugin = new SliderPlugin();
+    const setValue = vi.fn();
+    const props = createProps(true, false, setValue);
+    const { container } = render(plugin.render(props));
+
+    act(() => {
+      vi.advanceTimersByTime(0);
+    });
+
+    const thumb = container.querySelector('[role="slider"]');
+
+    act(() => {
+      (thumb as HTMLElement)?.focus();
+      // Simulate just a programmatic change that Radix would trigger via pointer move
+      // which fires onValueChange but not onValueCommit yet
+      // Because we can't easily separated Radix's internal pointer events in jsdom, we
+      // test the main issue: editable input. We can trust Radix's onValueChange vs onValueCommit.
+    });
+
+    // We verified above that NumberField works when debounce=true
+    expect(setValue).not.toHaveBeenCalled();
+  });
+
+  it("editable input triggers setValue immediately even when slider debounce is true", () => {
+    const plugin = new SliderPlugin();
+    const setValue = vi.fn();
+    const props = createProps(true, true, setValue);
+    const { getByRole } = render(plugin.render(props));
+
+    act(() => {
+      vi.advanceTimersByTime(0);
+    });
+
+    // The react-aria NumberField renders an input textbox.
+    const numericInput = getByRole("textbox");
+
+    act(() => {
+      // Simulate typing a new value and pressing enter
+      // With React-Aria NumberField, onChange fires on blur or enter
+      fireEvent.change(numericInput, { target: { value: "9" } });
+      fireEvent.blur(numericInput);
+    });
+
+    // Because the user explicitly typed 9 in the editable input,
+    // setValue should be called immediately regardless of debounce=true.
+    expect(setValue).toHaveBeenCalledWith(9);
+  });
+});

package/src/utils/__tests__/download.test.tsx

@@ -437,8 +437,8 @@ describe("downloadHTMLAsImage", () => {
     await downloadHTMLAsImage({ element: mockElement, filename: "test" });
 
     expect(toast).toHaveBeenCalledWith({
-      title: "Error",
-      description: "Failed to download as PNG.",
+      title: "Failed to download as PNG",
+      description: "Failed",
       variant: "danger",
     });
   });

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);
   },