@marimo-team/islands 0.25.3-dev29 → 0.25.3-dev290

package/src/plugins/core/RenderHTML.tsx

@@ -300,11 +300,9 @@ const CopyableCode = ({ children }: { children: ReactNode }) => {
           tooltip={false}
           className="p-1"
           value={() => {
-            const codeElement = ref.current?.firstChild;
-            if (codeElement) {
-              return codeElement.textContent || "";
-            }
-            return "";
+            const codeElement =
+              ref.current?.querySelector("pre code") ?? ref.current?.firstChild;
+            return codeElement?.textContent ?? "";
           }}
         />
       </div>

package/src/plugins/core/__test__/RenderHTML-copy.test.tsx

@@ -0,0 +1,60 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import { copyToClipboard } from "@/utils/copy";
+import { renderHTML } from "../RenderHTML";
+
+vi.mock("@/utils/copy", () => ({
+  copyToClipboard: vi.fn().mockResolvedValue(undefined),
+}));
+
+vi.mock("../sanitize", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../sanitize")>()),
+  useSanitizeHtml: () => true,
+}));
+
+test.each([
+  {
+    name: "syntax highlighting and whitespace",
+    html: '<div class="codehilite"><pre><span></span><code><span class="k">if</span> x &lt; 2:\n    print(&quot;hello&quot;)\n\n</code></pre></div>',
+    expected: 'if x < 2:\n    print("hello")\n\n',
+  },
+  {
+    name: "a block title",
+    html: '<div class="codehilite"><span class="filename">example.py</span><pre><span></span><code>print("hello")\n</code></pre></div>',
+    expected: 'print("hello")\n',
+  },
+  {
+    name: "line numbers in a separate column",
+    html: '<div class="codehilite"><table class="codehilitetable"><tbody><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>\n<span class="normal">2</span></pre></div></td><td class="code"><div><pre><span></span><code>print("hello")\nprint("world")\n</code></pre></div></td></tr></tbody></table></div>',
+    expected: 'print("hello")\nprint("world")\n',
+  },
+  {
+    name: "hidden fences outside the code",
+    html: '<div class="codehilite"><span hidden>~~~python\n</span><pre><code>print("hello")\n</code></pre><span hidden>~~~</span></div>',
+    expected: 'print("hello")\n',
+  },
+  {
+    name: "literal fences inside the code",
+    html: '<div class="codehilite"><pre><code>~~~python\nprint("``` and ~~~")\n~~~\n</code></pre></div>',
+    expected: '~~~python\nprint("``` and ~~~")\n~~~\n',
+  },
+  {
+    name: "an empty code element",
+    html: '<div class="codehilite"><span class="filename">empty.py</span><pre><code></code></pre></div>',
+    expected: "",
+  },
+  {
+    name: "highlighted HTML without a code element",
+    html: '<div class="codehilite"><pre><span class="nb">print</span>("hello")\n</pre></div>',
+    expected: 'print("hello")\n',
+  },
+])("copies code from $name", async ({ html, expected }) => {
+  const { getByRole } = render(renderHTML({ html }));
+
+  fireEvent.click(getByRole("button", { name: "Copy to clipboard" }));
+
+  await waitFor(() => {
+    expect(copyToClipboard).toHaveBeenCalledExactlyOnceWith(expected);
+  });
+});

package/src/plugins/core/registerReactComponent.tsx

@@ -24,9 +24,9 @@ import ReactDOM, { type Root } from "react-dom/client";
 import useEvent from "react-use-event-hook";
 import { type ZodSchema, z } from "zod";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { notebookAtom } from "@/core/cells/cells.ts";
 import { HTMLCellId } from "@/core/cells/ids.ts";
 import { isUninstantiated } from "@/core/cells/utils";
+import { cellExecutionInputsAtom, cellExecutionView } from "@/core/executions";
 import { createInputEvent, MarimoValueUpdateEvent } from "@/core/dom/events";
 import { getUIElementObjectId } from "@/core/dom/ui-element";
 import { UIElementRegistry } from "@/core/dom/uiregistry";
@@ -104,7 +104,7 @@ function PluginSlotInternal<T>(
   ref: React.Ref<PluginSlotHandle>,
 ): JSX.Element {
   const [childNodes, setChildNodes] = useState<ReactNode>(children);
-  const [value, setValue] = useState<T>(getInitialValue());
+  const [value, setValue] = useState<T>(getInitialValue);
   const { theme } = useTheme();
 
   const [parsedResult, setParsedResult] = useState(() => {
@@ -205,18 +205,9 @@ function PluginSlotInternal<T>(
         if (cellId && !isStatic) {
           // If the cell is not initialized, throw an error
           // Continue if the cell is static, so we can propagate a clearer error message.
-          const notebookState = store.get(notebookAtom);
-          const cellRuntime = notebookState.cellRuntime[cellId];
-          const cellData = notebookState.cellData[cellId];
-
-          const cellNotInitialized = isUninstantiated({
-            executionTime:
-              cellRuntime.runElapsedTimeMs ?? cellData.lastExecutionTime,
-            status: cellRuntime.status,
-            errored: cellRuntime.errored,
-            interrupted: cellRuntime.interrupted,
-            stopped: cellRuntime.stopped,
-          });
+          const cellNotInitialized = isUninstantiated(
+            cellExecutionView(store.get(cellExecutionInputsAtom), cellId),
+          );
 
           if (cellNotInitialized) {
             throw new CellNotInitializedError();

package/src/plugins/impl/CodeEditorPlugin.tsx

@@ -71,7 +71,7 @@ const CodeEditorComponent = (props: CodeEditorComponentProps) => {
   });
 
   const handleChange = useEvent((newValue: string) => {
-    setLocalValue((_) => newValue);
+    setLocalValue(newValue);
     if (typeof props.debounce === "number") {
       setValueDebounced(newValue);
     } else if (!props.debounce) {

package/src/plugins/impl/DataEditorPlugin.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import glideCss from "@glideapps/glide-data-grid/dist/index.css?inline";
+import glideCellsCss from "@glideapps/glide-data-grid-cells/dist/index.css?inline";
 import React, { useEffect, useState } from "react";
 import { z } from "zod";
 import { inferFieldTypes } from "@/components/data-table/columns";
@@ -15,9 +16,15 @@ import { useAsyncData } from "@/hooks/useAsyncData";
 import { createPlugin } from "../core/builder";
 import type { Setter } from "../types";
 import { columnToFieldTypesSchema } from "./data-frames/schema";
+import { normalizeConfiguredColumns } from "./data-editor/column-types";
 import { orderColumnFields } from "./data-editor/data-utils";
 import { applyEditorEdits } from "./data-editor/editor-state";
-import type { EditorRow, EditorState, Edits } from "./data-editor/types";
+import type {
+  ColumnType,
+  EditorRow,
+  EditorState,
+  Edits,
+} from "./data-editor/types";
 import { vegaLoadData } from "./vega/loader";
 import { getVegaFieldTypes } from "./vega/utils";
 
@@ -30,7 +37,7 @@ const LazyDataEditor = React.lazy(
 );
 
 export const DataEditorPlugin = createPlugin<Edits>("marimo-data-editor", {
-  cssStyles: [glideCss],
+  cssStyles: [glideCss, glideCellsCss],
 })
   .withData(
     z.object({
@@ -44,10 +51,16 @@ export const DataEditorPlugin = createPlugin<Edits>("marimo-data-editor", {
         ),
       }),
       label: z.string().nullable(),
-      data: z.union([z.string(), z.array(z.object({}).passthrough())]),
+      data: z.union([z.string(), z.array(z.looseObject({}))]),
       fieldTypes: columnToFieldTypesSchema.nullish(),
       columnNames: z.array(z.string()).default([]),
       editableColumns: z.union([z.array(z.string()), z.literal("all")]),
+      columnTypes: z
+        .record(
+          z.string(),
+          z.union([z.literal("boolean"), z.array(z.string())]),
+        )
+        .default({}),
       columnSizingMode: z.enum(["auto", "fit"]).default("auto"), // TODO: Remove this
     }),
   )
@@ -61,6 +74,7 @@ export const DataEditorPlugin = createPlugin<Edits>("marimo-data-editor", {
         edits={props.value}
         onEdits={props.setValue}
         editableColumns={props.data.editableColumns}
+        columnTypes={props.data.columnTypes}
       />
     );
   });
@@ -72,18 +86,15 @@ interface Props {
   onEdits: Setter<Edits>;
   editableColumns: string[] | "all";
   columnNames: string[];
+  columnTypes: Record<string, ColumnType>;
 }
 
 const LoadingDataEditor = (props: Props) => {
   const [editorState, setEditorState] = useState<EditorState | null>(null);
 
-  // Load the data
   const { data: loadedState, error } = useAsyncData(async () => {
     const withoutExternalTypes = toFieldTypes(props.fieldTypes ?? []);
 
-    // If we already have the data, return it
-    // Otherwise, load the data from the URL. Vega's CSV parser takes a
-    // plain `Record`; column order doesn't matter for parsing.
     const localData = Array.isArray(props.data)
       ? props.data
       : await vegaLoadData<EditorRow>(
@@ -95,14 +106,23 @@ const LoadingDataEditor = (props: Props) => {
           { handleBigIntAndNumberLike: true },
         );
 
+    const columnTypes = new Map(Object.entries(props.columnTypes));
+    const inferredFields = toFieldTypes(
+      props.fieldTypes ?? inferFieldTypes(localData),
+    );
+    for (const [columnName, columnType] of columnTypes) {
+      inferredFields.set(
+        columnName,
+        columnType === "boolean" ? "boolean" : "string",
+      );
+    }
+
     return {
-      data: localData,
-      columnFields: orderColumnFields(
-        toFieldTypes(props.fieldTypes ?? inferFieldTypes(localData)),
-        props.columnNames,
-      ),
+      data: normalizeConfiguredColumns(localData, columnTypes),
+      columnFields: orderColumnFields(inferredFields, props.columnNames),
+      columnTypes,
     } satisfies EditorState;
-  }, [props.fieldTypes, props.columnNames, props.data]);
+  }, [props.fieldTypes, props.columnNames, props.columnTypes, props.data]);
 
   useEffect(() => {
     if (loadedState !== undefined) {
@@ -133,6 +153,7 @@ const LoadingDataEditor = (props: Props) => {
     <LazyDataEditor
       data={editorState.data}
       columnFields={editorState.columnFields}
+      columnTypes={editorState.columnTypes}
       editableColumns={props.editableColumns}
       onAddEdits={(edits) => {
         setEditorState((state) =>

package/src/plugins/impl/DataTablePlugin.tsx

@@ -231,6 +231,7 @@ type DataTableFunctions = {
   }) => Promise<{
     data: TableData<T>;
     total_rows: number | TooManyRows;
+    has_next_page?: boolean | null;
     cell_styles?: CellStyleState | null;
     cell_hover_texts?: Record<string, Record<string, string | null>> | null;
     raw_data?: TableData<T> | null;
@@ -258,7 +259,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
         z.array(z.object({ rowId: z.string(), columnName: z.string() })),
       ]),
       label: z.string().nullable(),
-      data: z.union([z.string(), z.array(z.object({}).passthrough())]),
+      data: z.union([z.string(), z.array(z.looseObject({}))]),
       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),
@@ -296,7 +297,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       hasStableRowId: z.boolean().default(false),
       maxHeight: z.number().optional(),
       cellStyles: z
-        .record(z.string(), z.record(z.string(), z.object({}).passthrough()))
+        .record(z.string(), z.record(z.string(), z.looseObject({})))
         .optional(),
       hoverTemplate: z.string().optional(),
       cellHoverTexts: cellHoverTextSchema,
@@ -341,28 +342,26 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       )
       .output(
         z.object({
-          data: z.union([z.string(), z.array(z.object({}).passthrough())]),
+          data: z.union([z.string(), z.array(z.looseObject({}))]),
           total_rows: z.union([z.number(), z.literal(TOO_MANY_ROWS)]),
+          has_next_page: z.boolean().nullish(),
           cell_styles: z
-            .record(
-              z.string(),
-              z.record(z.string(), z.object({}).passthrough()),
-            )
+            .record(z.string(), z.record(z.string(), z.looseObject({})))
             .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(
+    get_row_ids: rpc.input(z.looseObject({})).output(
       z.object({
         row_ids: z.array(z.number()),
         all_rows: z.boolean(),
         error: z.string().nullable(),
       }),
     ),
-    get_data_url: rpc.input(z.object({}).passthrough()).output(
+    get_data_url: rpc.input(z.looseObject({})).output(
       z.object({
-        data_url: z.union([z.string(), z.array(z.object({}).passthrough())]),
+        data_url: z.union([z.string(), z.array(z.looseObject({}))]),
         format: z.enum(["csv", "json", "arrow"]),
       }),
     ),
@@ -510,6 +509,7 @@ interface DataTableSearchProps {
   filters?: ColumnFiltersState;
   setFilters?: SetFilters;
   hasStableRowId: boolean;
+  hasNextPage?: boolean;
 }
 
 export const LoadingDataTableComponent = memo(
@@ -546,16 +546,42 @@ export const LoadingDataTableComponent = memo(
       }
     }, [setValue, filters, searchQuery, sorting, props.hasStableRowId]);
 
-    // If pageSize changes, reset pagination state
-    useEffect(() => {
+    const [previousPageSize, setPreviousPageSize] = useState(props.pageSize);
+    // Reconcile before requesting data for the updated table configuration.
+    if (previousPageSize !== props.pageSize) {
+      setPreviousPageSize(props.pageSize);
       setPaginationState({ pageIndex: 0, pageSize: props.pageSize });
-    }, [props.pageSize]);
+    }
+
+    const resetLazyPage = useEvent(() => {
+      if (props.lazy) {
+        setPaginationState((state) =>
+          state.pageIndex === 0 ? state : { ...state, pageIndex: 0 },
+        );
+      }
+    });
+
+    const handleSortingChange: OnChangeFn<SortingState> = useEvent(
+      (updater) => {
+        setSorting(updater);
+        resetLazyPage();
+      },
+    );
+    const handleFiltersChange: SetFilters = useEvent((updater) => {
+      setFilters(updater);
+      resetLazyPage();
+    });
+    const handleSearchQueryChange = useEvent((query: string) => {
+      setSearchQuery(query);
+      resetLazyPage();
+    });
 
     // Data loading
     const { data, error, isPending, isFetching } = useAsyncData<{
       rows: T[];
       rawRows?: T[];
       totalRows: number | TooManyRows;
+      hasNextPage?: boolean;
       cellStyles: CellStyleState | undefined | null;
       cellHoverTexts?: Record<string, Record<string, string | null>> | null;
     }>(async () => {
@@ -572,6 +598,7 @@ export const LoadingDataTableComponent = memo(
       let tableData = props.data;
       let rawTableData: TableData<T> | undefined | null = props.rawData;
       let totalRows = props.totalRows;
+      let hasNextPage: boolean | undefined;
       let cellStyles = props.cellStyles;
       let cellHoverTexts = props.cellHoverTexts;
 
@@ -615,6 +642,7 @@ export const LoadingDataTableComponent = memo(
         tableData = searchResults.data;
         rawTableData = searchResults.raw_data;
         totalRows = searchResults.total_rows;
+        hasNextPage = searchResults.has_next_page ?? undefined;
         cellStyles = searchResults.cell_styles || {};
         cellHoverTexts = searchResults.cell_hover_texts || {};
       }
@@ -627,6 +655,7 @@ export const LoadingDataTableComponent = memo(
         rows: tableData,
         rawRows: rawData,
         totalRows: totalRows,
+        hasNextPage,
         cellStyles,
         cellHoverTexts,
       };
@@ -697,12 +726,13 @@ export const LoadingDataTableComponent = memo(
       [search, sorting, filters, searchQuery],
     );
 
-    // If total rows change, reset pageIndex
-    useEffect(() => {
+    const [previousTotalRows, setPreviousTotalRows] = useState(data?.totalRows);
+    if (previousTotalRows !== data?.totalRows) {
+      setPreviousTotalRows(data?.totalRows);
       setPaginationState((state) =>
         state.pageIndex === 0 ? state : { ...state, pageIndex: 0 },
       );
-    }, [data?.totalRows]);
+    }
 
     // Column summaries
     const { data: columnSummaries, error: columnSummariesError } = useAsyncData<
@@ -775,13 +805,16 @@ export const LoadingDataTableComponent = memo(
         rawData={data?.rawRows}
         columnSummaries={columnSummaries}
         sorting={sorting}
-        setSorting={setSorting}
+        setSorting={handleSortingChange}
         searchQuery={searchQuery}
-        setSearchQuery={setSearchQuery}
+        setSearchQuery={handleSearchQueryChange}
         filters={filters}
-        setFilters={setFilters}
+        setFilters={handleFiltersChange}
         reloading={isFetching && !isPending}
         totalRows={data?.totalRows ?? props.totalRows}
+        hasNextPage={
+          props.lazy ? !error && (data?.hasNextPage ?? false) : undefined
+        }
         sizeBytes={sizeBytes}
         sizeBytesIsLoading={sizeBytesIsLoading}
         paginationState={paginationState}
@@ -831,11 +864,12 @@ const DataTableComponent = ({
   data,
   rawData,
   totalRows,
+  hasNextPage,
   sizeBytes,
   sizeBytesIsLoading,
   maxColumns,
   pagination,
-  selection,
+  selection: requestedSelection,
   value,
   showFilters,
   showDownload,
@@ -843,7 +877,7 @@ const DataTableComponent = ({
   showColumnExplorer,
   showRowExplorer,
   showChartBuilder,
-  showDataTypes,
+  showDataTypes: requestedShowDataTypes,
   rowHeaders,
   fieldTypes,
   paginationState,
@@ -916,16 +950,16 @@ const DataTableComponent = ({
     }
     const fieldTypesWithoutExternalTypes = toFieldTypes(fieldTypes);
 
-    return new ColumnChartSpecModel(
-      columnSummaries.data || [],
-      fieldTypesWithoutExternalTypes,
-      columnSummaries.stats,
-      columnSummaries.bin_values,
-      columnSummaries.value_counts,
-      {
+    return new ColumnChartSpecModel({
+      data: columnSummaries.data || [],
+      fieldTypes: fieldTypesWithoutExternalTypes,
+      stats: columnSummaries.stats,
+      binValues: columnSummaries.bin_values,
+      valueCounts: columnSummaries.value_counts,
+      opts: {
         includeCharts: columnSummaries.show_charts,
       },
-    );
+    });
   }, [fieldTypes, columnSummaries]);
 
   const rowHeaderNames = new Set(rowHeaders.map(([name]) => name));
@@ -975,15 +1009,11 @@ const DataTableComponent = ({
   const fractionDigitsByColumn = useDeepCompareMemoize(computedFractionDigits);
   const shownColumns = memoizedClampedFieldTypes.length;
 
-  // If the field types are not set, we don't show them
-  if (!fieldTypes) {
-    showDataTypes = false;
-  }
+  // Only show data types when they are explicitly supplied.
+  const showDataTypes = Boolean(fieldTypes && requestedShowDataTypes);
 
   // Row/cell selection writes back to the kernel, absent in static exports.
-  if (isStatic) {
-    selection = null;
-  }
+  const selection = isStatic ? null : requestedSelection;
 
   const columns = useMemo(
     () =>
@@ -1134,7 +1164,8 @@ const DataTableComponent = ({
     <>
       {/* When the totalRows is "too_many" and the pageSize is the same as the
        * number of rows, we are likely displaying all the data (could be more, but we don't know the total). */}
-      {totalRows === TOO_MANY_ROWS &&
+      {hasNextPage === undefined &&
+        totalRows === TOO_MANY_ROWS &&
         paginationState.pageSize === data.length && (
           <Banner className="mb-1 rounded">
             Previewing the first {paginationState.pageSize} rows.
@@ -1172,6 +1203,7 @@ const DataTableComponent = ({
             maxHeight={maxHeight}
             sorting={sorting}
             totalRows={totalRows}
+            hasNextPage={hasNextPage}
             sizeBytes={sizeBytes}
             sizeBytesIsLoading={sizeBytesIsLoading}
             totalColumns={totalColumns}

package/src/plugins/impl/DropdownPlugin.tsx

@@ -97,13 +97,9 @@ const Dropdown = (props: DropdownProps): JSX.Element => {
         id={id}
         disabled={disabled}
       >
-        {allowSelectNone ? (
-          <option value={EMPTY_VALUE} selected={value.length === 0}>
-            --
-          </option>
-        ) : null}
+        {allowSelectNone ? <option value={EMPTY_VALUE}>--</option> : null}
         {options.map((option) => (
-          <option value={option} selected={value.includes(option)} key={option}>
+          <option value={option} key={option}>
             {option}
           </option>
         ))}

package/src/plugins/impl/FileBrowserPlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { type LucideIcon, ChevronRightIcon, CornerLeftUp } from "lucide-react";
-import { type JSX, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { type JSX, useLayoutEffect, useRef, useState } from "react";
 import { z } from "zod";
 import {
   FILE_ICON as FILE_TYPE_ICONS,
@@ -16,6 +16,7 @@ import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 import { toast } from "@/components/ui/use-toast";
 import { RANDOM_ID_ATTR } from "@/core/dom/ui-element-constants";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import { useDelayElapsed } from "@/hooks/useDelayElapsed";
 import { useInternalStateWithSync } from "@/hooks/useInternalStateWithSync";
 import { cn } from "@/utils/cn";
 import { type FilePath, PathBuilder, Paths } from "@/utils/paths";
@@ -200,7 +201,6 @@ export const FileBrowser = ({
 }: FileBrowserProps): JSX.Element | null => {
   const [path, setPath] = useInternalStateWithSync(initialPath);
   const [isUpdatingPath, setIsUpdatingPath] = useState(false);
-  const [showLoadingOverlay, setShowLoadingOverlay] = useState(false);
   const [activeIndex, setActiveIndex] = useState(0);
   const rowRefs = useRef<(HTMLTableRowElement | null)[]>([]);
   const gridRef = useRef<HTMLTableElement | null>(null);
@@ -219,20 +219,8 @@ export const FileBrowser = ({
     return list_directory({ path: path });
   }, [path, randomId, list_directory]);
 
-  useEffect(() => {
-    if (!isPending) {
-      setShowLoadingOverlay(false);
-      return;
-    }
-
-    const timeout = window.setTimeout(() => {
-      setShowLoadingOverlay(true);
-    }, 200);
-
-    return () => {
-      window.clearTimeout(timeout);
-    };
-  }, [isPending]);
+  const loadingDelayElapsed = useDelayElapsed(isPending ? 200 : 0);
+  const showLoadingOverlay = isPending && loadingDelayElapsed;
 
   // Reset the roving tabindex whenever the listing reloads (a new path or a
   // same-path refresh) so activeIndex never points past the current rows.

package/src/plugins/impl/FormPlugin.tsx

@@ -212,7 +212,7 @@ const Form = ({
   // wrapped plugin; this buffered value is in contrast to the actual
   // value of the plugin, which is the value of the wrapped plugin when
   // the submit button was last clicked/activated.
-  const [internalValue, setInternalValue] = useState<T>(
+  const [internalValue, setInternalValue] = useState<T>(() =>
     UI_ELEMENT_REGISTRY.lookupValue(elementId),
   );
 

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -5,7 +5,10 @@ import { type JSX, useEffect, useId, useState } from "react";
 import { useLocale } from "react-aria";
 import { z } from "zod";
 import { cn } from "@/utils/cn";
-import { prettyScientificNumber } from "@/utils/numbers";
+import {
+  fractionDigitsForSlider,
+  prettyScientificNumber,
+} from "@/utils/numbers";
 import { RangeSlider } from "../../components/ui/range-slider";
 import type { IPlugin, IPluginProps, Setter } from "../types";
 import { Labeled } from "./common/labeled";
@@ -87,6 +90,12 @@ const RangeSliderComponent = ({
 
   // Hold internal value
   const [internalValue, setInternalValue] = useState(value);
+  const fractionDigits = fractionDigitsForSlider(
+    step,
+    steps,
+    start,
+    internalValue.map(valueMap),
+  );
 
   // Update internal value on prop change
   useEffect(() => {
@@ -122,6 +131,7 @@ const RangeSliderComponent = ({
           min={start}
           max={stop}
           step={step}
+          steps={steps ?? undefined}
           orientation={orientation}
           disabled={disabled}
           // Triggered on all value changes
@@ -155,8 +165,12 @@ const RangeSliderComponent = ({
         {showValue && (
           <div className="text-xs text-muted-foreground min-w-[16px]">
             {`${prettyScientificNumber(valueMap(internalValue[0]), {
+              maximumFractionDigits: fractionDigits,
+              locale,
+            })}, ${prettyScientificNumber(valueMap(internalValue[1]), {
+              maximumFractionDigits: fractionDigits,
               locale,
-            })}, ${prettyScientificNumber(valueMap(internalValue[1]), { locale })}`}
+            })}`}
           </div>
         )}
       </div>

package/src/plugins/impl/RefreshPlugin.tsx

@@ -119,6 +119,7 @@ const RefreshComponent = ({ setValue, data }: IPluginProps<Value, Data>) => {
     <Labeled label={data.label}>
       <span className="inline-flex items-center text-secondary-foreground rounded shadow-sm-solid">
         <Button
+          aria-label="Refresh"
           data-testid="marimo-plugin-refresh-button"
           variant="secondary"
           size="icon"

package/src/plugins/impl/SliderPlugin.tsx

@@ -1,8 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { type JSX, useEffect, useId, useMemo, useState } from "react";
+import { type JSX, useId, useMemo } from "react";
 import { useLocale } from "react-aria";
 import { z } from "zod";
 import { NumberField } from "@/components/ui/number-field";
+import { useInternalStateWithSync } from "@/hooks/useInternalStateWithSync";
 import { cn } from "@/utils/cn";
 import { clamp } from "@/utils/math";
 import {
@@ -156,13 +157,10 @@ const SliderComponent = ({
   const { locale } = useLocale();
 
   // Hold internal value
-  const [internalValue, setInternalValue] = useState(value);
-  // Update internal value on prop change
-  useEffect(() => {
-    // TODO: Replace this synchronization with a controlled-state primitive.
-    // oxlint-disable-next-line react/no-deriving-state-in-effects -- Synchronize the editable buffer when the controlled value changes.
-    setInternalValue(value);
-  }, [value]);
+  const [internalValue, setInternalValue] = useInternalStateWithSync(
+    value,
+    Object.is,
+  );
 
   const stepsConfig = useMemo(() => computeStepsConfig(steps), [steps]);