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

package/dist/assets/{write-secret-modal-CwsDn7jz.js → write-secret-modal-DM7t6LNp.js}

@@ -1 +1 @@
-import{s as V}from"./chunk-LvLJmgfZ.js";import{t as B}from"./react-Bj1aDYRI.js";import{t as G}from"./compiler-runtime-B3qBwwSJ.js";import{t as H}from"./jsx-runtime-BqBOg78p.js";import{c as I,i as J,n as O,s as Q,t as U}from"./select-6suE6YM2.js";import{t as P}from"./label-C2_YQRio.js";import{t as W}from"./button-BbCh-29a.js";import{r as X}from"./requests-DIwGYs0l.js";import{r as D}from"./input-DckzEovC.js";import{t as E}from"./use-toast-CJ1Tj2eC.js";import{a as Z,c as $,i as ee,n as te,r as re}from"./dialog-DRnNAWYl.js";import{t as ae}from"./links-D1JoyKTt.js";import{r as L}from"./field-BWxnw0_c.js";var oe=G(),T=V(B(),1),t=V(H(),1);function ne(a){return a.toSorted((e,r)=>e.provider==="env"?1:r.provider==="env"?-1:0)}const le=a=>{let e=(0,oe.c)(43),{providerNames:r,onClose:A,onSuccess:F}=a,{writeSecret:Y}=X(),[o,M]=T.useState(""),[l,R]=T.useState(""),[n,z]=T.useState(r[0]),g;e[0]!==o||e[1]!==n||e[2]!==F||e[3]!==l||e[4]!==Y?(g=async i=>{if(i.preventDefault(),!n){E({title:"Error",description:"No location selected for the secret.",variant:"danger"});return}if(!o||!l||!n){E({title:"Error",description:"Please fill in all fields.",variant:"danger"});return}try{await Y({key:o,value:l,provider:"dotenv",name:n}),E({title:"Secret created",description:"The secret has been created successfully."}),F(o)}catch{E({title:"Error",description:"Failed to create secret. Please try again.",variant:"danger"})}},e[0]=o,e[1]=n,e[2]=F,e[3]=l,e[4]=Y,e[5]=g):g=e[5];let q=g,j;e[6]===Symbol.for("react.memo_cache_sentinel")?(j=(0,t.jsxs)(Z,{children:[(0,t.jsx)($,{children:"Add Secret"}),(0,t.jsx)(re,{children:"Add a new secret to your environment variables."})]}),e[6]=j):j=e[6];let y;e[7]===Symbol.for("react.memo_cache_sentinel")?(y=(0,t.jsx)(P,{htmlFor:"key",children:"Key"}),e[7]=y):y=e[7];let S;e[8]===Symbol.for("react.memo_cache_sentinel")?(S=i=>{M(ie(i.target.value))},e[8]=S):S=e[8];let s;e[9]===o?s=e[10]:(s=(0,t.jsxs)("div",{className:"grid gap-2",children:[y,(0,t.jsx)(D,{id:"key",value:o,onChange:S,placeholder:"MY_SECRET_KEY",required:!0})]}),e[9]=o,e[10]=s);let _;e[11]===Symbol.for("react.memo_cache_sentinel")?(_=(0,t.jsx)(P,{htmlFor:"value",children:"Value"}),e[11]=_):_=e[11];let b;e[12]===Symbol.for("react.memo_cache_sentinel")?(b=i=>R(i.target.value),e[12]=b):b=e[12];let c;e[13]===l?c=e[14]:(c=(0,t.jsx)(D,{id:"value",type:"password",value:l,onChange:b,required:!0,autoComplete:"off"}),e[13]=l,e[14]=c);let C;e[15]===Symbol.for("react.memo_cache_sentinel")?(C=se()&&(0,t.jsx)(L,{children:"Note: You are sending this key over http."}),e[15]=C):C=e[15];let d;e[16]===c?d=e[17]:(d=(0,t.jsxs)("div",{className:"grid gap-2",children:[_,c,C]}),e[16]=c,e[17]=d);let N;e[18]===Symbol.for("react.memo_cache_sentinel")?(N=(0,t.jsx)(P,{htmlFor:"location",children:"Location"}),e[18]=N):N=e[18];let m;e[19]===r.length?m=e[20]:(m=r.length===0&&(0,t.jsx)("p",{className:"text-sm text-muted-foreground",children:"No dotenv locations configured."}),e[19]=r.length,e[20]=m);let h;e[21]!==n||e[22]!==r?(h=r.length>0&&(0,t.jsxs)(U,{value:n,onValueChange:i=>z(i),children:[(0,t.jsx)(Q,{children:(0,t.jsx)(I,{placeholder:"Select a provider"})}),(0,t.jsx)(O,{children:r.map(ce)})]}),e[21]=n,e[22]=r,e[23]=h):h=e[23];let k;e[24]===Symbol.for("react.memo_cache_sentinel")?(k=(0,t.jsxs)(L,{children:["You can configure the location by setting the"," ",(0,t.jsx)(ae,{href:"https://links.marimo.app/dotenv",children:"dotenv configuration"}),"."]}),e[24]=k):k=e[24];let p;e[25]!==m||e[26]!==h?(p=(0,t.jsxs)("div",{className:"grid gap-2",children:[N,m,h,k]}),e[25]=m,e[26]=h,e[27]=p):p=e[27];let u;e[28]!==d||e[29]!==p||e[30]!==s?(u=(0,t.jsxs)("div",{className:"grid gap-4 py-4",children:[s,d,p]}),e[28]=d,e[29]=p,e[30]=s,e[31]=u):u=e[31];let f;e[32]===A?f=e[33]:(f=(0,t.jsx)(W,{type:"button",variant:"outline",onClick:A,children:"Cancel"}),e[32]=A,e[33]=f);let K=!o||!l||!n,v;e[34]===K?v=e[35]:(v=(0,t.jsx)(W,{type:"submit",disabled:K,children:"Add Secret"}),e[34]=K,e[35]=v);let x;e[36]!==f||e[37]!==v?(x=(0,t.jsxs)(ee,{children:[f,v]}),e[36]=f,e[37]=v,e[38]=x):x=e[38];let w;return e[39]!==q||e[40]!==u||e[41]!==x?(w=(0,t.jsx)(te,{children:(0,t.jsxs)("form",{onSubmit:q,children:[j,u,x]})}),e[39]=q,e[40]=u,e[41]=x,e[42]=w):w=e[42],w};function ie(a){return a.replaceAll(/\W/g,"_")}function se(){return window.location.href.startsWith("http://")}function ce(a){return(0,t.jsx)(J,{value:a,children:a},a)}export{ne as n,le as t};
+import{s as V}from"./chunk-LvLJmgfZ.js";import{t as B}from"./react-Bj1aDYRI.js";import{t as G}from"./compiler-runtime-B3qBwwSJ.js";import{t as H}from"./jsx-runtime-BqBOg78p.js";import{c as I,i as J,n as O,s as Q,t as U}from"./select-6suE6YM2.js";import{t as P}from"./label-C2_YQRio.js";import{t as W}from"./button-BbCh-29a.js";import{r as X}from"./requests-DIwGYs0l.js";import{r as D}from"./input-DA8xlX70.js";import{t as E}from"./use-toast-CJ1Tj2eC.js";import{a as Z,c as $,i as ee,n as te,r as re}from"./dialog-DRnNAWYl.js";import{t as ae}from"./links-D1JoyKTt.js";import{r as L}from"./field-DCdxnSKm.js";var oe=G(),T=V(B(),1),t=V(H(),1);function ne(a){return a.toSorted((e,r)=>e.provider==="env"?1:r.provider==="env"?-1:0)}const le=a=>{let e=(0,oe.c)(43),{providerNames:r,onClose:A,onSuccess:F}=a,{writeSecret:Y}=X(),[o,M]=T.useState(""),[l,R]=T.useState(""),[n,z]=T.useState(r[0]),g;e[0]!==o||e[1]!==n||e[2]!==F||e[3]!==l||e[4]!==Y?(g=async i=>{if(i.preventDefault(),!n){E({title:"Error",description:"No location selected for the secret.",variant:"danger"});return}if(!o||!l||!n){E({title:"Error",description:"Please fill in all fields.",variant:"danger"});return}try{await Y({key:o,value:l,provider:"dotenv",name:n}),E({title:"Secret created",description:"The secret has been created successfully."}),F(o)}catch{E({title:"Error",description:"Failed to create secret. Please try again.",variant:"danger"})}},e[0]=o,e[1]=n,e[2]=F,e[3]=l,e[4]=Y,e[5]=g):g=e[5];let q=g,j;e[6]===Symbol.for("react.memo_cache_sentinel")?(j=(0,t.jsxs)(Z,{children:[(0,t.jsx)($,{children:"Add Secret"}),(0,t.jsx)(re,{children:"Add a new secret to your environment variables."})]}),e[6]=j):j=e[6];let y;e[7]===Symbol.for("react.memo_cache_sentinel")?(y=(0,t.jsx)(P,{htmlFor:"key",children:"Key"}),e[7]=y):y=e[7];let S;e[8]===Symbol.for("react.memo_cache_sentinel")?(S=i=>{M(ie(i.target.value))},e[8]=S):S=e[8];let s;e[9]===o?s=e[10]:(s=(0,t.jsxs)("div",{className:"grid gap-2",children:[y,(0,t.jsx)(D,{id:"key",value:o,onChange:S,placeholder:"MY_SECRET_KEY",required:!0})]}),e[9]=o,e[10]=s);let _;e[11]===Symbol.for("react.memo_cache_sentinel")?(_=(0,t.jsx)(P,{htmlFor:"value",children:"Value"}),e[11]=_):_=e[11];let b;e[12]===Symbol.for("react.memo_cache_sentinel")?(b=i=>R(i.target.value),e[12]=b):b=e[12];let c;e[13]===l?c=e[14]:(c=(0,t.jsx)(D,{id:"value",type:"password",value:l,onChange:b,required:!0,autoComplete:"off"}),e[13]=l,e[14]=c);let C;e[15]===Symbol.for("react.memo_cache_sentinel")?(C=se()&&(0,t.jsx)(L,{children:"Note: You are sending this key over http."}),e[15]=C):C=e[15];let d;e[16]===c?d=e[17]:(d=(0,t.jsxs)("div",{className:"grid gap-2",children:[_,c,C]}),e[16]=c,e[17]=d);let N;e[18]===Symbol.for("react.memo_cache_sentinel")?(N=(0,t.jsx)(P,{htmlFor:"location",children:"Location"}),e[18]=N):N=e[18];let m;e[19]===r.length?m=e[20]:(m=r.length===0&&(0,t.jsx)("p",{className:"text-sm text-muted-foreground",children:"No dotenv locations configured."}),e[19]=r.length,e[20]=m);let h;e[21]!==n||e[22]!==r?(h=r.length>0&&(0,t.jsxs)(U,{value:n,onValueChange:i=>z(i),children:[(0,t.jsx)(Q,{children:(0,t.jsx)(I,{placeholder:"Select a provider"})}),(0,t.jsx)(O,{children:r.map(ce)})]}),e[21]=n,e[22]=r,e[23]=h):h=e[23];let k;e[24]===Symbol.for("react.memo_cache_sentinel")?(k=(0,t.jsxs)(L,{children:["You can configure the location by setting the"," ",(0,t.jsx)(ae,{href:"https://links.marimo.app/dotenv",children:"dotenv configuration"}),"."]}),e[24]=k):k=e[24];let p;e[25]!==m||e[26]!==h?(p=(0,t.jsxs)("div",{className:"grid gap-2",children:[N,m,h,k]}),e[25]=m,e[26]=h,e[27]=p):p=e[27];let u;e[28]!==d||e[29]!==p||e[30]!==s?(u=(0,t.jsxs)("div",{className:"grid gap-4 py-4",children:[s,d,p]}),e[28]=d,e[29]=p,e[30]=s,e[31]=u):u=e[31];let f;e[32]===A?f=e[33]:(f=(0,t.jsx)(W,{type:"button",variant:"outline",onClick:A,children:"Cancel"}),e[32]=A,e[33]=f);let K=!o||!l||!n,v;e[34]===K?v=e[35]:(v=(0,t.jsx)(W,{type:"submit",disabled:K,children:"Add Secret"}),e[34]=K,e[35]=v);let x;e[36]!==f||e[37]!==v?(x=(0,t.jsxs)(ee,{children:[f,v]}),e[36]=f,e[37]=v,e[38]=x):x=e[38];let w;return e[39]!==q||e[40]!==u||e[41]!==x?(w=(0,t.jsx)(te,{children:(0,t.jsxs)("form",{onSubmit:q,children:[j,u,x]})}),e[39]=q,e[40]=u,e[41]=x,e[42]=w):w=e[42],w};function ie(a){return a.replaceAll(/\W/g,"_")}function se(){return window.location.href.startsWith("http://")}function ce(a){return(0,t.jsx)(J,{value:a,children:a},a)}export{ne as n,le as t};

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-BEUIgFV-.js"></script>
+    <script type="module" crossorigin src="./assets/index-DukQCuHG.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-BPPi7vOr.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-Bj1aDYRI.js">
@@ -140,14 +140,14 @@
     <link rel="modulepreload" crossorigin href="./assets/alert-dialog-5BGIfskO.js">
     <link rel="modulepreload" crossorigin href="./assets/dialog-DRnNAWYl.js">
     <link rel="modulepreload" crossorigin href="./assets/useDebounce-7xZwVnnu.js">
-    <link rel="modulepreload" crossorigin href="./assets/numbers-C3BAdHZE.js">
+    <link rel="modulepreload" crossorigin href="./assets/numbers-DGxQfQ-A.js">
     <link rel="modulepreload" crossorigin href="./assets/SSRProvider-CkFAAHXw.js">
     <link rel="modulepreload" crossorigin href="./assets/context-QkTujrKn.js">
     <link rel="modulepreload" crossorigin href="./assets/useNumberFormatter-ByUv-u9o.js">
     <link rel="modulepreload" crossorigin href="./assets/usePress-DQ_tAz5W.js">
-    <link rel="modulepreload" crossorigin href="./assets/input-DckzEovC.js">
-    <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-CDPfRIx5.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-BFEa98Sc.js">
+    <link rel="modulepreload" crossorigin href="./assets/input-DA8xlX70.js">
+    <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-BW1dmntO.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-spbX-mlL.js">
     <link rel="modulepreload" crossorigin href="./assets/multi-map-C4OANz8X.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-yTS3WpF4.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-CG5QYXYk.js">
@@ -162,7 +162,7 @@
     <link rel="modulepreload" crossorigin href="./assets/state-C9ggN1rs.js">
     <link rel="modulepreload" crossorigin href="./assets/package-Tv6ztuzw.js">
     <link rel="modulepreload" crossorigin href="./assets/sparkles-lWUAsPhp.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-BQyzDTet.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-DIx3jD4Z.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-Cm6DdkeR.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-DHwG4Mac.js">
     <link rel="modulepreload" crossorigin href="./assets/tree-actions-XvgFV23w.js">
@@ -174,8 +174,8 @@
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-BygYYKhs.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-5FQGJX7Z-Bp9g5nD2.js">
     <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-BwjWZESf.js">
-    <link rel="modulepreload" crossorigin href="./assets/command-BkXWJLBP.js">
-    <link rel="modulepreload" crossorigin href="./assets/field-BWxnw0_c.js">
+    <link rel="modulepreload" crossorigin href="./assets/command-BmOGG6-2.js">
+    <link rel="modulepreload" crossorigin href="./assets/field-DCdxnSKm.js">
     <link rel="modulepreload" crossorigin href="./assets/popover-CNCYAwbC.js">
     <link rel="modulepreload" crossorigin href="./assets/errors-D3F5g1xA.js">
     <link rel="modulepreload" crossorigin href="./assets/download-BS31LU22.js">
@@ -190,7 +190,7 @@
     <link rel="modulepreload" crossorigin href="./assets/emotion-is-prop-valid.esm-C59xfSYt.js">
     <link rel="modulepreload" crossorigin href="./assets/useDateFormatter-ICIDGgHf.js">
     <link rel="modulepreload" crossorigin href="./assets/react-icons.esm-BNzu6e7h.js">
-    <link rel="modulepreload" crossorigin href="./assets/RSPContexts-QoVyPvhN.js">
+    <link rel="modulepreload" crossorigin href="./assets/RSPContexts-C3vBe8nL.js">
     <link rel="modulepreload" crossorigin href="./assets/table-6NxtGaCm.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-KAhMaCIV.js">
     <link rel="modulepreload" crossorigin href="./assets/external-link-BTNxSavU.js">
@@ -198,11 +198,11 @@
     <link rel="modulepreload" crossorigin href="./assets/plus-BgB18UzY.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-2-rVklqqFF.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-CV8-hvjx.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-BemZ015x.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-DXzjDImT.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-nqk474t8.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-uY_yJr5g.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-CPQR_o92.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-DYVirisk.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-cHpj1JI3.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-Ol38nIbL.js">
     <link rel="modulepreload" crossorigin href="./assets/radio-group-DS_mmqHJ.js">
     <link rel="modulepreload" crossorigin href="./assets/floating-outline-CCH9y0X9.js">
@@ -225,7 +225,7 @@
     <link rel="modulepreload" crossorigin href="./assets/label-C2_YQRio.js">
     <link rel="modulepreload" crossorigin href="./assets/textarea-BfDUjd9c.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-ccw-C-n2VFP5.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-BWJXHKy1.js">
+    <link rel="modulepreload" crossorigin href="./assets/form-BUVEy6A8.js">
     <link rel="modulepreload" crossorigin href="./assets/renderShortcut--ku7VECI.js">
     <link rel="modulepreload" crossorigin href="./assets/useBoolean-CE6PfxGj.js">
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-CVmg-GkP.js">
@@ -246,7 +246,7 @@
     <link rel="stylesheet" crossorigin href="./assets/cells-pu5xzE_v.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DdDKmWlR.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B7vuddcd.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-Ct3LgsQ8.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-DB64hzBp.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "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);
+    });
+  });
 });