@marimo-team/frontend 0.23.10-dev9 → 0.23.11-dev1

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

@@ -71,6 +71,15 @@ export class CellNotInitializedError extends Error {
   }
 }
 
+export class FunctionNotFoundError extends Error {
+  constructor(
+    message = "This UI element could not reach its function on the kernel. Try re-running the cell.",
+  ) {
+    super(message);
+    this.name = "FunctionNotFoundError";
+  }
+}
+
 export class NoKernelConnectedError extends Error {
   constructor(message = "Not yet connected to a kernel.") {
     super(message);

package/src/utils/lazy.ts

@@ -3,7 +3,12 @@
 import React from "react";
 
 interface LazyComponentWithPreload<T> {
-  preload: () => void;
+  /**
+   * Eagerly trigger the dynamic import. Returns the import promise so callers
+   * can await it or attach error handling; safe to call multiple times (the
+   * import is memoized).
+   */
+  preload: () => Promise<{ default: React.ComponentType<T> }>;
   Component: React.LazyExoticComponent<React.ComponentType<T>>;
 }
 

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 "";

package/src/utils/schedule-task.ts

@@ -0,0 +1,71 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+/**
+ * Schedules `callback` to run as a fresh task once the current task finishes,
+ * letting the browser paint and handle input in between. Used to spread heavy
+ * work across the event loop instead of blocking it in one long task.
+ */
+export type ScheduleTaskFn = (callback: () => void) => void;
+
+/**
+ * Picks the best available "yield to the event loop" primitive, preferring
+ * ones that impose no artificial delay between tasks:
+ *
+ * 1. `scheduler.postTask` — the purpose-built Prioritized Task Scheduling API.
+ *    `user-visible` runs promptly while still yielding to user-blocking input.
+ * 2. `MessageChannel` — a plain macrotask with no minimum-delay clamp (nested
+ *    `setTimeout` is floored at ~4ms by the spec, which would add up over many
+ *    tasks).
+ * 3. `setTimeout` — universal fallback; correct, just clamped when nested.
+ *
+ * The backend is chosen once, at module load, since it cannot change within a
+ * session.
+ */
+// `scheduler` (the Prioritized Task Scheduling API) is not in this repo's
+// lib.dom typings, so it is feature-detected behind this minimal cast.
+interface PostTaskScheduler {
+  postTask: (
+    callback: () => void,
+    options?: { priority?: "user-blocking" | "user-visible" | "background" },
+  ) => Promise<unknown>;
+}
+
+function createScheduleTask(): ScheduleTaskFn {
+  const scheduler = (globalThis as { scheduler?: PostTaskScheduler }).scheduler;
+  if (typeof scheduler?.postTask === "function") {
+    return (cb) => {
+      // postTask rejects when the callback throws. Rethrow on a fresh task so a
+      // thrown callback surfaces as an uncaught error, matching the
+      // MessageChannel/setTimeout backends, instead of an unhandledrejection.
+      void scheduler
+        .postTask(cb, { priority: "user-visible" })
+        .catch((error) => {
+          setTimeout(() => {
+            throw error;
+          });
+        });
+    };
+  }
+
+  if (typeof MessageChannel === "function") {
+    // Both ports live on this thread and no data is sent: posting a message is
+    // just the cheapest way to enqueue a macrotask that yields for paint. The
+    // queue lets multiple callbacks be in flight at once (one per message).
+    const pending: Array<() => void> = [];
+    const channel = new MessageChannel();
+    channel.port1.onmessage = () => {
+      pending.shift()?.();
+    };
+
+    return (cb) => {
+      pending.push(cb);
+      channel.port2.postMessage(null);
+    };
+  }
+
+  return (cb) => {
+    setTimeout(cb, 0);
+  };
+}
+
+/** Shared task scheduler using the best primitive this environment offers. */
+export const scheduleTask = createScheduleTask();