@marimo-team/islands 0.21.2-dev3 → 0.21.2-dev30

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/DataTablePlugin.tsx

@@ -53,6 +53,7 @@ import {
 } from "@/components/data-table/types";
 import {
   getPageIndexForRow,
+  loadTableAndRawData,
   loadTableData,
 } from "@/components/data-table/utils";
 import { ErrorBoundary } from "@/components/editor/boundary/ErrorBoundary";
@@ -174,6 +175,7 @@ const valueCounts: z.ZodType<ValueCounts> = z.array(
 interface Data<T> {
   label: string | null;
   data: TableData<T>;
+  rawData?: TableData<T> | null;
   totalRows: number | TooManyRows;
   pagination: boolean;
   pageSize: number;
@@ -221,6 +223,7 @@ type DataTableFunctions = {
     total_rows: number | TooManyRows;
     cell_styles?: CellStyleState | null;
     cell_hover_texts?: Record<string, Record<string, string | null>> | null;
+    raw_data?: TableData<T> | null;
   }>;
   get_data_url?: GetDataUrl;
   get_row_ids?: GetRowIds;
@@ -243,6 +246,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       ]),
       label: z.string().nullable(),
       data: z.union([z.string(), z.array(z.object({}).passthrough())]),
+      rawData: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
       totalRows: z.union([z.number(), z.literal(TOO_MANY_ROWS)]),
       pagination: z.boolean().default(false),
       pageSize: z.number().default(10),
@@ -327,6 +331,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
             )
             .nullable(),
           cell_hover_texts: cellHoverTextSchema.nullable(),
+          raw_data: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
         }),
       ),
     get_row_ids: rpc.input(z.object({}).passthrough()).output(
@@ -529,17 +534,23 @@ export const LoadingDataTableComponent = memo(
     // Data loading
     const { data, error, isPending, isFetching } = useAsyncData<{
       rows: T[];
+      rawRows?: T[];
       totalRows: number | TooManyRows;
       cellStyles: CellStyleState | undefined | null;
       cellHoverTexts?: Record<string, Record<string, string | null>> | null;
     }>(async () => {
       // If there is no data, return an empty array
       if (props.totalRows === 0) {
-        return { rows: Arrays.EMPTY, totalRows: 0, cellStyles: {} };
+        return {
+          rows: Arrays.EMPTY,
+          totalRows: 0,
+          cellStyles: {},
+        };
       }
 
       // Table data is a url string or an array of objects
       let tableData = props.data;
+      let rawTableData: TableData<T> | undefined | null = props.rawData;
       let totalRows = props.totalRows;
       let cellStyles = props.cellStyles;
       let cellHoverTexts = props.cellHoverTexts;
@@ -587,13 +598,19 @@ export const LoadingDataTableComponent = memo(
       } else {
         const searchResults = await searchResultsPromise;
         tableData = searchResults.data;
+        rawTableData = searchResults.raw_data;
         totalRows = searchResults.total_rows;
         cellStyles = searchResults.cell_styles || {};
         cellHoverTexts = searchResults.cell_hover_texts || {};
       }
-      tableData = await loadTableData(tableData);
+      const [data, rawData] = await loadTableAndRawData(
+        tableData,
+        rawTableData,
+      );
+      tableData = data;
       return {
         rows: tableData,
+        rawRows: rawData,
         totalRows: totalRows,
         cellStyles,
         cellHoverTexts,
@@ -715,6 +732,7 @@ export const LoadingDataTableComponent = memo(
       <DataTableComponent
         {...props}
         data={data?.rows ?? Arrays.EMPTY}
+        rawData={data?.rawRows}
         columnSummaries={columnSummaries}
         sorting={sorting}
         setSorting={setSorting}
@@ -766,6 +784,7 @@ LoadingDataTableComponent.displayName = "LoadingDataTableComponent";
 const DataTableComponent = ({
   label,
   data,
+  rawData,
   totalRows,
   maxColumns,
   pagination,
@@ -814,6 +833,7 @@ const DataTableComponent = ({
 }: DataTableProps<unknown> &
   DataTableSearchProps & {
     data: unknown[];
+    rawData?: unknown[];
     columnSummaries?: ColumnSummaries;
     getRow: (rowIdx: number) => Promise<GetRowResult>;
   }): JSX.Element => {
@@ -1015,6 +1035,7 @@ const DataTableComponent = ({
         <Labeled label={label} align="top" fullWidth={true}>
           <DataTable
             data={data}
+            rawData={rawData}
             columns={columns}
             className={className}
             maxHeight={maxHeight}

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/copy.ts

@@ -2,21 +2,34 @@
 import { Logger } from "./Logger";
 
 /**
- * Tries to copy text to the clipboard using the navigator.clipboard API.
- * If that fails, it falls back to prompting the user to copy.
+ * Copy text to the clipboard. When `html` is provided, writes both
+ * text/html and text/plain so rich content (e.g. hyperlinks) is
+ * preserved when pasting into apps like Excel or Google Sheets.
  *
  * As of 2024-10-29, Safari does not support navigator.clipboard.writeText
  * when running localhost http.
  */
-export async function copyToClipboard(text: string) {
+export async function copyToClipboard(text: string, html?: string) {
   if (navigator.clipboard === undefined) {
     Logger.warn("navigator.clipboard is not supported");
     window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
     return;
   }
 
-  await navigator.clipboard.writeText(text).catch(async () => {
-    // Fallback to prompt
+  if (html && navigator.clipboard.write) {
+    try {
+      const item = new ClipboardItem({
+        "text/html": new Blob([html], { type: "text/html" }),
+        "text/plain": new Blob([text], { type: "text/plain" }),
+      });
+      await navigator.clipboard.write([item]);
+      return;
+    } catch {
+      Logger.warn("Failed to write rich text, falling back to plain text");
+    }
+  }
+
+  await navigator.clipboard.writeText(text).catch(() => {
     Logger.warn("Failed to copy to clipboard using navigator.clipboard");
     window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
   });

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