@marimo-team/islands 0.23.10-dev37 → 0.23.10-dev41

package/package.json

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

package/src/components/ui/number-field.tsx

@@ -25,7 +25,10 @@ export interface NumberFieldProps extends AriaNumberFieldProps {
 }
 
 export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
-  ({ placeholder, variant = "default", onInputText, ...props }, ref) => {
+  (
+    { placeholder, variant = "default", onInputText, formatOptions, ...props },
+    ref,
+  ) => {
     const { locale } = useLocale();
     return (
       <AriaNumberField
@@ -33,6 +36,7 @@ export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
         formatOptions={{
           minimumFractionDigits: 0,
           maximumFractionDigits: maxFractionalDigits(locale),
+          ...formatOptions,
         }}
       >
         <div

package/src/plugins/impl/SliderPlugin.tsx

@@ -1,10 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { type JSX, useEffect, useId, useState } from "react";
+import { type JSX, useEffect, useId, useMemo, useState } from "react";
 import { useLocale } from "react-aria";
 import { z } from "zod";
 import { NumberField } from "@/components/ui/number-field";
 import { cn } from "@/utils/cn";
-import { prettyScientificNumber } from "@/utils/numbers";
+import { clamp } from "@/utils/math";
+import {
+  maxFractionDigitsForSteps,
+  prettyScientificNumber,
+  roundToFractionDigits,
+} from "@/utils/numbers";
 import { Slider } from "../../components/ui/slider";
 import type { IPlugin, IPluginProps, Setter } from "../types";
 import { Labeled } from "./common/labeled";
@@ -46,8 +51,9 @@ export class SliderPlugin implements IPlugin<T, Data> {
   render(props: IPluginProps<T, Data>): JSX.Element {
     // Create the valueMap function
     const valueMap = (sliderValue: number): number => {
-      if (props.data.steps && props.data.steps.length > 0) {
-        return props.data.steps[sliderValue];
+      const { steps } = props.data;
+      if (steps && steps.length > 0) {
+        return steps[clamp(sliderValue, 0, steps.length - 1)];
       }
       return sliderValue;
     };
@@ -69,6 +75,66 @@ interface SliderProps extends Data {
   valueMap: (sliderValue: number) => number;
 }
 
+interface StepsConfig {
+  steps: T[];
+  fractionDigits: number;
+  minValue: number;
+  maxValue: number;
+  inputStep: number;
+  formatOptions: {
+    minimumFractionDigits: number;
+    maximumFractionDigits: number;
+  };
+}
+
+// Index of the step whose value is closest to `target`.
+function nearestStepIndex(stepValues: T[], target: number): number {
+  let bestIndex = 0;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  for (let i = 0; i < stepValues.length; i++) {
+    const distance = Math.abs(stepValues[i] - target);
+    if (distance < bestDistance) {
+      bestDistance = distance;
+      bestIndex = i;
+    }
+  }
+  return bestIndex;
+}
+
+// When `steps` are provided, the slider runs in *index* space (start=0,
+// stop=len-1, step=1) while the input must display and accept the *actual*
+// step values. This config maps the input back into value space.
+function computeStepsConfig(steps: T[] | null): StepsConfig | null {
+  if (!steps || steps.length === 0) {
+    return null;
+  }
+  const sorted = steps.toSorted((a, b) => a - b);
+  // Smallest positive gap between consecutive step values, used as the input's
+  // increment/decrement amount. Falls back to 1 when undefined.
+  let inputStep = Number.POSITIVE_INFINITY;
+  for (let i = 1; i < sorted.length; i++) {
+    const gap = sorted[i] - sorted[i - 1];
+    if (gap > 0 && gap < inputStep) {
+      inputStep = gap;
+    }
+  }
+  if (!Number.isFinite(inputStep) || inputStep <= 0) {
+    inputStep = 1;
+  }
+  const fractionDigits = maxFractionDigitsForSteps(steps, inputStep);
+  return {
+    steps,
+    fractionDigits,
+    minValue: roundToFractionDigits(sorted[0], fractionDigits),
+    maxValue: roundToFractionDigits(sorted[sorted.length - 1], fractionDigits),
+    inputStep: roundToFractionDigits(inputStep, fractionDigits),
+    formatOptions: {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: fractionDigits,
+    },
+  };
+}
+
 const SliderComponent = ({
   label,
   setValue,
@@ -95,6 +161,64 @@ const SliderComponent = ({
     setInternalValue(value);
   }, [value]);
 
+  const stepsConfig = useMemo(() => computeStepsConfig(steps), [steps]);
+
+  const handleInputChange = (nextValue: number | null | undefined): void => {
+    if (stepsConfig) {
+      const { steps: stepValues, fractionDigits } = stepsConfig;
+      // Cleared input -> reset to the first step.
+      if (nextValue == null || Number.isNaN(nextValue)) {
+        setInternalValue(0);
+        setValue(0);
+        return;
+      }
+      const roundedNext = roundToFractionDigits(nextValue, fractionDigits);
+      let index = nearestStepIndex(stepValues, roundedNext);
+      // If the nearest step is the current one but the value actually moved
+      // (e.g. stepper arrows on non-uniform steps), nudge one index in the
+      // direction of travel so the input never gets "stuck". Caveat: a typed
+      // value closest to the current step but past it nudges too, so on
+      // non-uniform steps typing a nearby number can jump to the adjacent step.
+      const currentValue = roundToFractionDigits(
+        stepValues[internalValue] ?? stepValues[0],
+        fractionDigits,
+      );
+      if (index === internalValue && roundedNext !== currentValue) {
+        index =
+          roundedNext > currentValue
+            ? Math.min(internalValue + 1, stepValues.length - 1)
+            : Math.max(internalValue - 1, 0);
+      }
+      setInternalValue(index);
+      setValue(index);
+      return;
+    }
+
+    // No steps: the input value is the slider value directly.
+    const resolved =
+      nextValue == null || Number.isNaN(nextValue) ? Number(start) : nextValue;
+    setInternalValue(resolved);
+    setValue(resolved);
+  };
+
+  const inputProps = stepsConfig
+    ? {
+        value: roundToFractionDigits(
+          valueMap(internalValue),
+          stepsConfig.fractionDigits,
+        ),
+        minValue: stepsConfig.minValue,
+        maxValue: stepsConfig.maxValue,
+        step: stepsConfig.inputStep,
+        formatOptions: stepsConfig.formatOptions,
+      }
+    : {
+        value: valueMap(internalValue),
+        minValue: start,
+        maxValue: stop,
+        step,
+      };
+
   const sliderElement = (
     <Labeled
       label={label}
@@ -123,14 +247,14 @@ const SliderComponent = ({
           step={step}
           orientation={orientation}
           // Triggered on all value changes
-          onValueChange={([nextValue]) => {
+          onValueChange={([nextValue]: number[]) => {
             setInternalValue(nextValue);
             if (!debounce) {
               setValue(nextValue);
             }
           }}
           // Triggered on mouse up
-          onValueCommit={([nextValue]) => {
+          onValueCommit={([nextValue]: [number]) => {
             if (debounce) {
               setValue(nextValue);
             }
@@ -145,18 +269,8 @@ const SliderComponent = ({
         )}
         {includeInput && (
           <NumberField
-            value={valueMap(internalValue)}
-            onChange={(nextValue) => {
-              // If nextValue is null/undefined/NaN (input cleared), set to start
-              if (nextValue == null || Number.isNaN(nextValue)) {
-                nextValue = Number(start);
-              }
-              setInternalValue(nextValue);
-              setValue(nextValue);
-            }}
-            minValue={start}
-            maxValue={stop}
-            step={step}
+            {...inputProps}
+            onChange={handleInputChange}
             className="w-24"
             aria-label={`${label || "Slider"} value input`}
             isDisabled={disabled}

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

@@ -50,11 +50,18 @@ describe("SliderPlugin", () => {
     vi.useRealTimers();
   });
 
-  const createProps = (
-    debounce: boolean,
-    includeInput: boolean,
-    setValue: ReturnType<typeof vi.fn>,
-  ): IPluginProps<number, z.infer<typeof SliderPlugin.prototype.validator>> => {
+  const createProps = ({
+    debounce,
+    includeInput,
+    setValue,
+  }: {
+    debounce: boolean;
+    includeInput: boolean;
+    setValue: ReturnType<typeof vi.fn>;
+  }): IPluginProps<
+    number,
+    z.infer<typeof SliderPlugin.prototype.validator>
+  > => {
     return {
       host: document.createElement("div"),
       value: 5,
@@ -76,10 +83,57 @@ describe("SliderPlugin", () => {
     };
   };
 
+  // When `steps` are provided, the slider works in *index* space: `value`,
+  // `start`, `stop` and `step` are all indices into the `steps` array, while
+  // the editable input shows/accepts the actual step values.
+  const createStepsProps = ({
+    steps,
+    valueIndex,
+    setValue,
+  }: {
+    steps: number[];
+    valueIndex: number;
+    setValue: ReturnType<typeof vi.fn>;
+  }): IPluginProps<
+    number,
+    z.infer<typeof SliderPlugin.prototype.validator>
+  > => {
+    return {
+      host: document.createElement("div"),
+      value: valueIndex,
+      setValue,
+      data: {
+        initialValue: valueIndex,
+        start: 0,
+        stop: steps.length - 1,
+        step: 1,
+        label: "Test Slider",
+        debounce: false,
+        orientation: "horizontal" as const,
+        showValue: false,
+        fullWidth: false,
+        includeInput: true,
+        steps,
+      },
+      functions: {},
+    };
+  };
+
+  const typeAndCommit = (input: HTMLElement, value: string) => {
+    act(() => {
+      fireEvent.change(input, { target: { value } });
+      fireEvent.blur(input);
+    });
+  };
+
   it("slider triggers setValue immediately when debounce is false", () => {
     const plugin = new SliderPlugin();
     const setValue = vi.fn();
-    const props = createProps(false, false, setValue);
+    const props = createProps({
+      debounce: false,
+      includeInput: false,
+      setValue,
+    });
     const { getByRole } = render(plugin.render(props));
 
     act(() => {
@@ -98,7 +152,11 @@ describe("SliderPlugin", () => {
   it("slider waits until commit before calling setValue when debounce is true", () => {
     const plugin = new SliderPlugin();
     const setValue = vi.fn();
-    const props = createProps(true, false, setValue);
+    const props = createProps({
+      debounce: true,
+      includeInput: false,
+      setValue,
+    });
     const { getByRole } = render(plugin.render(props));
 
     act(() => {
@@ -124,7 +182,7 @@ describe("SliderPlugin", () => {
   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 props = createProps({ debounce: true, includeInput: true, setValue });
     const { getByRole } = render(plugin.render(props));
 
     act(() => {
@@ -145,4 +203,216 @@ describe("SliderPlugin", () => {
     // setValue should be called immediately regardless of debounce=true.
     expect(setValue).toHaveBeenCalledWith(9);
   });
+
+  describe("editable input with steps (regression for #9850)", () => {
+    it("displays the actual step value, not the index", () => {
+      const plugin = new SliderPlugin();
+      const setValue = vi.fn();
+      // steps[0] === -4, displayed value must be -4 (not the index 0).
+      const props = createStepsProps({
+        steps: [-4, -3, -2, -1],
+        valueIndex: 0,
+        setValue,
+      });
+      const { getByRole } = render(plugin.render(props));
+
+      act(() => {
+        vi.advanceTimersByTime(0);
+      });
+
+      const input = getByRole("textbox") as HTMLInputElement;
+      expect(input.value).toBe("-4");
+    });
+
+    it("displays decimal step values without float artifacts", () => {
+      const plugin = new SliderPlugin();
+      const setValue = vi.fn();
+      const props = createStepsProps({
+        steps: [0.1, 0.2, 0.3, 0.4],
+        valueIndex: 2,
+        setValue,
+      });
+      const { getByRole } = render(plugin.render(props));
+
+      act(() => {
+        vi.advanceTimersByTime(0);
+      });
+
+      const input = getByRole("textbox") as HTMLInputElement;
+      expect(input.value).toBe("0.3");
+    });
+
+    it("steps decimal input increment and decrement buttons move between steps", () => {
+      const plugin = new SliderPlugin();
+      const setValue = vi.fn();
+      const props = createStepsProps({
+        steps: [0.1, 0.2, 0.3, 0.4],
+        valueIndex: 2,
+        setValue,
+      });
+      const { getByRole } = render(plugin.render(props));
+
+      act(() => {
+        vi.advanceTimersByTime(0);
+      });
+
+      const decrement = getByRole("button", {
+        name: "Decrease Test Slider value input",
+      });
+      const increment = getByRole("button", {
+        name: "Increase Test Slider value input",
+      });
+
+      expect(decrement).not.toBeDisabled();
+
+      act(() => {
+        fireEvent.click(decrement);
+      });
+      expect(setValue.mock.calls).toEqual([[1]]);
+
+      act(() => {
+        fireEvent.click(increment);
+      });
+      expect(setValue).toHaveBeenLastCalledWith(2);
+    });
+
+    it("maps a typed integer step value back to its index", () => {
+      const plugin = new SliderPlugin();
+      const setValue = vi.fn();
+      const props = createStepsProps({
+        steps: [1, 2, 3, 4],
+        valueIndex: 0,
+        setValue,
+      });
+      const { getByRole } = render(plugin.render(props));
+
+      act(() => {
+        vi.advanceTimersByTime(0);
+      });
+
+      const input = getByRole("textbox");
+      // Typing "4" should select the last step (index 3), not index 4.
+      typeAndCommit(input, "4");
+      expect(setValue).toHaveBeenLastCalledWith(3);
+
+      // Typing "2" should select index 1, not get "stuck" on 3.
+      typeAndCommit(input, "2");
+      expect(setValue).toHaveBeenLastCalledWith(1);
+    });
+
+    it("maps fractional step values back to their index", () => {
+      const plugin = new SliderPlugin();
+      const setValue = vi.fn();
+      const props = createStepsProps({
+        steps: [0.1, 0.2, 0.3, 0.4],
+        valueIndex: 0,
+        setValue,
+      });
+      const { getByRole } = render(plugin.render(props));
+
+      act(() => {
+        vi.advanceTimersByTime(0);
+      });
+
+      const input = getByRole("textbox");
+      typeAndCommit(input, "0.3");
+      expect(setValue).toHaveBeenLastCalledWith(2);
+    });
+
+    it("maps negative step values back to their index", () => {
+      const plugin = new SliderPlugin();
+      const setValue = vi.fn();
+      const props = createStepsProps({
+        steps: [-4, -3, -2, -1],
+        valueIndex: 0,
+        setValue,
+      });
+      const { getByRole } = render(plugin.render(props));
+
+      act(() => {
+        vi.advanceTimersByTime(0);
+      });
+
+      const input = getByRole("textbox");
+      typeAndCommit(input, "-2");
+      expect(setValue).toHaveBeenLastCalledWith(2);
+    });
+
+    it("clamps out-of-range typed values to the nearest step index", () => {
+      const plugin = new SliderPlugin();
+      const setValue = vi.fn();
+      const props = createStepsProps({
+        steps: [1, 2, 3, 4],
+        valueIndex: 0,
+        setValue,
+      });
+      const { getByRole } = render(plugin.render(props));
+
+      act(() => {
+        vi.advanceTimersByTime(0);
+      });
+
+      const input = getByRole("textbox");
+      // Above the max step -> clamps to the last index.
+      typeAndCommit(input, "100");
+      expect(setValue).toHaveBeenLastCalledWith(3);
+    });
+
+    it("does not crash when steps shrink while the index is temporarily out of range", () => {
+      const plugin = new SliderPlugin();
+      const setValue = vi.fn();
+      // Start at the last index of a 5-element steps array.
+      const props = createStepsProps({
+        steps: [10, 20, 30, 40, 50],
+        valueIndex: 4,
+        setValue,
+      });
+      const { getByRole, rerender } = render(plugin.render(props));
+
+      act(() => {
+        vi.advanceTimersByTime(0);
+      });
+
+      // Shrink `steps` so the held index (4) is now out of range. The index
+      // syncs in an effect after this render, so the render must not throw on
+      // the stale, out-of-range index.
+      const shrunkProps = createStepsProps({
+        steps: [10, 20],
+        valueIndex: 1,
+        setValue,
+      });
+      expect(() => {
+        act(() => {
+          rerender(plugin.render(shrunkProps));
+          vi.advanceTimersByTime(0);
+        });
+      }).not.toThrow();
+
+      const input = getByRole("textbox") as HTMLInputElement;
+      expect(input.value).toBe("20");
+    });
+
+    it("nudges to the adjacent step on non-uniform steps even when the current step is nearest (known caveat)", () => {
+      const plugin = new SliderPlugin();
+      const setValue = vi.fn();
+      // Non-uniform steps; start at index 2 (value 10).
+      const props = createStepsProps({
+        steps: [0, 1, 10, 100],
+        valueIndex: 2,
+        setValue,
+      });
+      const { getByRole } = render(plugin.render(props));
+
+      act(() => {
+        vi.advanceTimersByTime(0);
+      });
+
+      const input = getByRole("textbox");
+      // 10 is far closer to 12 than 100 is, but because 12 > 10 the input nudges
+      // up one index. This documents the stepper-vs-typing limitation: onChange
+      // can't distinguish a typed value from a stepper-button increment.
+      typeAndCommit(input, "12");
+      expect(setValue).toHaveBeenLastCalledWith(3);
+    });
+  });
 });

package/src/utils/__tests__/numbers.test.ts

@@ -1,6 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
 import {
+  countFractionDigits,
+  maxFractionDigitsForSteps,
   prettyEngineeringNumber,
   prettyNumber,
   prettyScientificNumber,
@@ -86,3 +88,21 @@ describe("prettyEngineeringNumber", () => {
     expect(prettyEngineeringNumber(-0.000_123_4, locale)).toBe("-123µ");
   });
 });
+
+describe("countFractionDigits", () => {
+  it("counts decimal places without float noise", () => {
+    expect(countFractionDigits(1)).toBe(0);
+    expect(countFractionDigits(0.1)).toBe(1);
+    expect(countFractionDigits(0.3)).toBe(1);
+    expect(countFractionDigits(0.000025)).toBe(6);
+    expect(countFractionDigits(3.5)).toBe(1);
+  });
+});
+
+describe("maxFractionDigitsForSteps", () => {
+  it("infers precision from steps and gaps", () => {
+    expect(maxFractionDigitsForSteps([0.1, 0.2, 0.3, 0.4], 0.1)).toBe(1);
+    expect(maxFractionDigitsForSteps([1, 2, 3.5, 4], 0.5)).toBe(1);
+    expect(maxFractionDigitsForSteps([1, 2, 3, 4], 1)).toBe(0);
+  });
+});

package/src/utils/numbers.ts

@@ -23,6 +23,33 @@ export const maxFractionalDigits = memoizeLastValue((locale: string) => {
   return 0;
 });
 
+/** Decimal places needed to display `n` without float noise. */
+export function countFractionDigits(n: number): number {
+  if (!Number.isFinite(n) || n === 0) {
+    return 0;
+  }
+  const normalized = n.toFixed(12).replace(/\.?0+$/, "");
+  const dot = normalized.indexOf(".");
+  return dot === -1 ? 0 : normalized.length - dot - 1;
+}
+
+/** Max fraction digits to display a set of step values cleanly. */
+export function maxFractionDigitsForSteps(
+  steps: number[],
+  minGap: number,
+): number {
+  let max = countFractionDigits(minGap);
+  for (const step of steps) {
+    max = Math.max(max, countFractionDigits(step));
+  }
+  return max;
+}
+
+/** Round away float noise so step-based inputs stay on a clean decimal grid. */
+export function roundToFractionDigits(n: number, digits: number): number {
+  return Number(n.toFixed(digits));
+}
+
 export function prettyNumber(value: unknown, locale: string): string {
   if (value === undefined || value === null) {
     return "";