fix number inputs (NumericInput), widen dialogs, reset wizard on open

marekprochazka · marekprochazka · commit f4a2753e4576 · 2026-05-19T09:04:42.000+02:00
diff --git a/deno.json b/deno.json
@@ -1,6 +1,6 @@
 {
   "name": "@molstar/molstar-components",
-  "version": "0.6.0-experimental.17",
+  "version": "0.6.0-experimental.18",
   "license": "MIT",
   "exports": {
     ".": "./src/mod.ts",
diff --git a/src/state-builder-ui/SetupWizard.tsx b/src/state-builder-ui/SetupWizard.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from './base/dialog.tsx';
 import { Button } from './base/button.tsx';
 import { Input } from './base/input.tsx';
@@ -18,6 +18,7 @@ import {
   assignMissingRefs,
 } from '../state-builder/index.ts';
 import { SelectorHelperContent, type SelectorTab } from './helpers/SelectorHelperContent.tsx';
+import { NumericInput } from './components/NumericInput.tsx';
 
 interface SetupWizardProps {
   open: boolean;
@@ -96,6 +97,16 @@ export function SetupWizard({ open, onOpenChange, onComplete }: SetupWizardProps
   const [components, setComponents] = useState<ComponentConfig[]>([newComponent()]);
   const [activeCompTab, setActiveCompTab] = useState('0');
 
+  useEffect(() => {
+    if (!open) return;
+    setStep(1);
+    setUrl(''); setFormat('bcif');
+    setStructureType('model'); setAssemblyId('');
+    setRadius(5); setIjkMin([0, 0, 0]); setIjkMax([1, 1, 1]);
+    setModelIndex(undefined); setBlockIndex(undefined); setBlockHeader(undefined); setCoordinatesRef(undefined);
+    setComponents([newComponent()]); setActiveCompTab('0');
+  }, [open]);
+
   const formats = getActiveValues(PARSE_FORMATS);
   const reprTypes = getActiveValues(REPRESENTATION_TYPES);
   const presetSelectors = getActiveValues(COMPONENT_SELECTORS);
@@ -164,7 +175,7 @@ export function SetupWizard({ open, onOpenChange, onComplete }: SetupWizardProps
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className='sm:max-w-[520px] gap-0 p-0 overflow-hidden'>
+      <DialogContent className='sm:max-w-[860px] gap-0 p-0 overflow-hidden'>
         <DialogHeader className='pb-0'>
           <StepIndicator currentStep={step} />
           <DialogTitle className='px-5 pt-3 pb-0 text-base'>
@@ -216,7 +227,7 @@ export function SetupWizard({ open, onOpenChange, onComplete }: SetupWizardProps
             {structureType === 'symmetry_mates' && (
               <div className='flex flex-col gap-1 w-28'>
                 <Label className='text-xs'>Radius (Å)</Label>
-                <Input className='h-7 text-xs font-mono' type='number' min='0' step='1' placeholder='5' value={radius} onChange={(e) => setRadius(parseFloat(e.target.value) || 5)} />
+                <NumericInput className='h-7 text-xs font-mono' placeholder='5' value={radius} onChange={(v) => setRadius(v ?? radius)} />
               </div>
             )}
             {structureType === 'symmetry' && (
@@ -229,16 +240,14 @@ export function SetupWizard({ open, onOpenChange, onComplete }: SetupWizardProps
                       <Label className='text-xs'>IJK {bound}</Label>
                       <div className='flex gap-1'>
                         {(['i', 'j', 'k'] as const).map((axis, idx) => (
-                          <Input
+                          <NumericInput
                             key={axis}
                             className='h-7 text-xs font-mono w-14'
-                            type='number'
-                            step='1'
                             placeholder={axis}
                             value={val[idx]}
-                            onChange={(e) => {
+                            onChange={(v) => {
                               const next = [...val] as [number, number, number];
-                              next[idx] = parseInt(e.target.value) || 0;
+                              next[idx] = v ?? next[idx];
                               set(next);
                             }}
                           />
diff --git a/src/state-builder-ui/components/fields/ComponentFields.tsx b/src/state-builder-ui/components/fields/ComponentFields.tsx
@@ -64,7 +64,7 @@ function SelectorDialog({
         <span className='truncate'>{preview}</span>
       </Button>
 
-      <DialogContent className='sm:max-w-lg'>
+      <DialogContent className='sm:max-w-2xl'>
         <DialogHeader>
           <DialogTitle>Build Component Selector</DialogTitle>
         </DialogHeader>
diff --git a/src/state-builder-ui/components/fields/StructureFields.tsx b/src/state-builder-ui/components/fields/StructureFields.tsx
@@ -1,6 +1,7 @@
-import { Input } from '../../ui/input.tsx';
-import { Label } from '../../ui/label.tsx';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select.tsx';
+import { Input } from '../../base/input.tsx';
+import { Label } from '../../base/label.tsx';
+import { NumericInput } from '../NumericInput.tsx';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../base/select.tsx';
 import { STRUCTURE_TYPES, getActiveValues } from '../../../state-builder/index.ts';
 
 interface StructureFieldsProps {
@@ -27,16 +28,14 @@ function IjkInput({
       <Label className='text-xs'>{label}</Label>
       <div className='flex gap-1 mt-1'>
         {(['i', 'j', 'k'] as const).map((axis, idx) => (
-          <Input
+          <NumericInput
             key={axis}
             className='h-8 text-xs font-mono w-14'
-            type='number'
-            step='1'
             placeholder={axis}
             value={value[idx]}
-            onChange={(e) => {
+            onChange={(v) => {
               const next = [...value] as [number, number, number];
-              next[idx] = parseInt(e.target.value) || 0;
+              next[idx] = v ?? next[idx];
               onChange(next);
             }}
           />
diff --git a/src/state-builder-ui/helpers/InterpolateHelper.tsx b/src/state-builder-ui/helpers/InterpolateHelper.tsx
@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import type { ReactNode } from 'react';
 import { Input } from '../base/input.tsx';
+import { NumericInput } from '../components/NumericInput.tsx';
 import { Label } from '../base/label.tsx';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../base/select.tsx';
 import type { UINode } from '../../state-builder/index.ts';
@@ -113,14 +114,11 @@ export function InterpolateHelper({ node, onUpdate, open, onOpenChange, trigger,
             </div>
             <div className='flex flex-col gap-1 w-36'>
               <Label className='text-xs'>Duration (ms)</Label>
-              <Input
+              <NumericInput
                 className='h-7 text-xs font-mono'
-                type='number'
-                min='0'
-                step='100'
                 placeholder='1000'
                 value={durationMs}
-                onChange={(e) => setDurationMs(parseInt(e.target.value) || 0)}
+                onChange={(v) => setDurationMs(v ?? durationMs)}
               />
             </div>
           </div>
diff --git a/src/state-builder-ui/helpers/StructureHelper.tsx b/src/state-builder-ui/helpers/StructureHelper.tsx
@@ -6,6 +6,7 @@ import { Input } from '../base/input.tsx';
 import { Label } from '../base/label.tsx';
 import type { UINode } from '../../state-builder/index.ts';
 import { NodeHelperBase } from './NodeHelperBase.tsx';
+import { NumericInput } from '../components/NumericInput.tsx';
 
 interface StructureHelperProps {
   node: UINode;
@@ -27,16 +28,14 @@ function IjkInput({ label, value, onChange }: { label: string; value: [number, n
       <Label className='text-xs'>{label}</Label>
       <div className='flex gap-1'>
         {(['i', 'j', 'k'] as const).map((axis, idx) => (
-          <Input
+          <NumericInput
             key={axis}
             className='h-7 text-xs font-mono w-14'
-            type='number'
-            step='1'
             placeholder={axis}
             value={value[idx]}
-            onChange={(e) => {
+            onChange={(v) => {
               const next = [...value] as [number, number, number];
-              next[idx] = parseInt(e.target.value) || 0;
+              next[idx] = v ?? next[idx];
               onChange(next);
             }}
           />
@@ -181,7 +180,7 @@ export function StructureHelper({ node, onUpdate, open, onOpenChange, trigger, o
         <div className='flex flex-col gap-3'>
           <div className='flex flex-col gap-1 w-28'>
             <Label className='text-xs'>Radius (Å)</Label>
-            <Input className='h-7 text-xs font-mono' type='number' min='0' step='1' placeholder='5' value={radius} onChange={(e) => setRadius(parseFloat(e.target.value) || 5)} />
+            <NumericInput className='h-7 text-xs font-mono' placeholder='5' value={radius} onChange={(v) => setRadius(v ?? radius)} />
           </div>
           <SharedFields {...sharedProps} />
         </div>
diff --git a/src/state-builder-ui/helpers/primitive-helper/BoxFields.tsx b/src/state-builder-ui/helpers/primitive-helper/BoxFields.tsx
@@ -2,6 +2,7 @@
 
 import { Input } from '../../base/input.tsx';
 import { Label } from '../../base/label.tsx';
+import { NumericInput } from '../../components/NumericInput.tsx';
 import { PositionEditor } from './PositionEditor.tsx';
 import { positionFromParam, positionToParam } from './types.ts';
 import type { PrimitiveKindFieldsProps } from './types.ts';
@@ -15,9 +16,9 @@ export function BoxFields({ params, onUpdate }: PrimitiveKindFieldsProps) {
     return [1, 1, 1];
   };
 
-  const handleExtent = (axis: 0 | 1 | 2, str: string) => {
+  const handleExtent = (axis: 0 | 1 | 2, v: number | undefined) => {
     const next = [...getVec3('extent')] as [number, number, number];
-    next[axis] = parseFloat(str) || 0;
+    next[axis] = v ?? next[axis];
     onUpdate({ ...params, extent: next });
   };
 
@@ -35,13 +36,10 @@ export function BoxFields({ params, onUpdate }: PrimitiveKindFieldsProps) {
           {(['X', 'Y', 'Z'] as const).map((ax, i) => (
             <div key={ax}>
               <Label className='text-xs text-muted-foreground'>{ax}</Label>
-              <Input
+              <NumericInput
                 className='h-8 text-sm font-mono'
-                type='number'
-                step='0.1'
-                min='0'
                 value={getVec3('extent')[i]}
-                onChange={(e) => handleExtent(i as 0 | 1 | 2, e.target.value)}
+                onChange={(v) => handleExtent(i as 0 | 1 | 2, v)}
               />
             </div>
           ))}
diff --git a/src/state-builder-ui/helpers/primitive-helper/EllipseFields.tsx b/src/state-builder-ui/helpers/primitive-helper/EllipseFields.tsx
@@ -2,6 +2,7 @@
 
 import { Input } from '../../base/input.tsx';
 import { Label } from '../../base/label.tsx';
+import { NumericInput } from '../../components/NumericInput.tsx';
 import { PositionEditor } from './PositionEditor.tsx';
 import { positionFromParam, positionToParam } from './types.ts';
 import type { PrimitiveKindFieldsProps } from './types.ts';
@@ -15,9 +16,9 @@ export function EllipseFields({ params, onUpdate }: PrimitiveKindFieldsProps) {
     return [1, 0, 0];
   };
 
-  const handleVec3 = (key: string, axis: 0 | 1 | 2, str: string) => {
+  const handleVec3 = (key: string, axis: 0 | 1 | 2, v: number | undefined) => {
     const next = [...getVec3(key)] as [number, number, number];
-    next[axis] = parseFloat(str) || 0;
+    next[axis] = v ?? next[axis];
     onUpdate({ ...params, [key]: next });
   };
 
@@ -35,12 +36,10 @@ export function EllipseFields({ params, onUpdate }: PrimitiveKindFieldsProps) {
           {(['X', 'Y', 'Z'] as const).map((ax, i) => (
             <div key={ax}>
               <Label className='text-xs text-muted-foreground'>{ax}</Label>
-              <Input
+              <NumericInput
                 className='h-8 text-sm font-mono'
-                type='number'
-                step='0.1'
                 value={getVec3('major_axis')[i]}
-                onChange={(e) => handleVec3('major_axis', i as 0 | 1 | 2, e.target.value)}
+                onChange={(v) => handleVec3('major_axis', i as 0 | 1 | 2, v)}
               />
             </div>
           ))}
@@ -53,12 +52,10 @@ export function EllipseFields({ params, onUpdate }: PrimitiveKindFieldsProps) {
           {(['X', 'Y', 'Z'] as const).map((ax, i) => (
             <div key={ax}>
               <Label className='text-xs text-muted-foreground'>{ax}</Label>
-              <Input
+              <NumericInput
                 className='h-8 text-sm font-mono'
-                type='number'
-                step='0.1'
                 value={getVec3('minor_axis')[i]}
-                onChange={(e) => handleVec3('minor_axis', i as 0 | 1 | 2, e.target.value)}
+                onChange={(v) => handleVec3('minor_axis', i as 0 | 1 | 2, v)}
               />
             </div>
           ))}
diff --git a/src/state-builder-ui/helpers/primitive-helper/EllipsoidFields.tsx b/src/state-builder-ui/helpers/primitive-helper/EllipsoidFields.tsx
@@ -2,6 +2,7 @@
 
 import { Input } from '../../base/input.tsx';
 import { Label } from '../../base/label.tsx';
+import { NumericInput } from '../../components/NumericInput.tsx';
 import { PositionEditor } from './PositionEditor.tsx';
 import { positionFromParam, positionToParam, defaultPositionState } from './types.ts';
 import type { PrimitiveKindFieldsProps } from './types.ts';
@@ -15,9 +16,9 @@ export function EllipsoidFields({ params, onUpdate }: PrimitiveKindFieldsProps)
     return [0, 0, 0];
   };
 
-  const handleVec3 = (key: string, axis: 0 | 1 | 2, str: string) => {
+  const handleVec3 = (key: string, axis: 0 | 1 | 2, v: number | undefined) => {
     const next = [...getVec3(key)] as [number, number, number];
-    next[axis] = parseFloat(str) || 0;
+    next[axis] = v ?? next[axis];
     onUpdate({ ...params, [key]: next });
   };
 
@@ -35,12 +36,10 @@ export function EllipsoidFields({ params, onUpdate }: PrimitiveKindFieldsProps)
           {(['X', 'Y', 'Z'] as const).map((ax, i) => (
             <div key={ax}>
               <Label className='text-xs text-muted-foreground'>{ax}</Label>
-              <Input
+              <NumericInput
                 className='h-8 text-sm font-mono'
-                type='number'
-                step='0.1'
                 value={getVec3('major_axis')[i]}
-                onChange={(e) => handleVec3('major_axis', i as 0 | 1 | 2, e.target.value)}
+                onChange={(v) => handleVec3('major_axis', i as 0 | 1 | 2, v)}
               />
             </div>
           ))}
@@ -53,12 +52,10 @@ export function EllipsoidFields({ params, onUpdate }: PrimitiveKindFieldsProps)
           {(['X', 'Y', 'Z'] as const).map((ax, i) => (
             <div key={ax}>
               <Label className='text-xs text-muted-foreground'>{ax}</Label>
-              <Input
+              <NumericInput
                 className='h-8 text-sm font-mono'
-                type='number'
-                step='0.1'
                 value={getVec3('minor_axis')[i]}
-                onChange={(e) => handleVec3('minor_axis', i as 0 | 1 | 2, e.target.value)}
+                onChange={(v) => handleVec3('minor_axis', i as 0 | 1 | 2, v)}
               />
             </div>
           ))}
diff --git a/src/state-builder-ui/helpers/primitive-helper/PositionEditor.tsx b/src/state-builder-ui/helpers/primitive-helper/PositionEditor.tsx
@@ -2,8 +2,8 @@
 
 import { useEffect, useRef, useState } from 'react';
 import { Button } from '../../base/button.tsx';
-import { Input } from '../../base/input.tsx';
 import { Label } from '../../base/label.tsx';
+import { NumericInput } from '../../components/NumericInput.tsx';
 import type { PositionEditorState } from './types.ts';
 import { positionToParam, tryParseExpressionJson } from './types.ts';
 import { SelectorHelperContent } from '../SelectorHelperContent.tsx';
@@ -52,8 +52,8 @@ export function PositionEditor({ label, state, onChange }: PositionEditorProps)
     // before the user has had a chance to interact.
   };
 
-  const handleAxis = (axis: 'x' | 'y' | 'z', str: string) => {
-    emitChange({ ...state, mode: 'vec3', [axis]: parseFloat(str) || 0 });
+  const handleAxis = (axis: 'x' | 'y' | 'z', v: number | undefined) => {
+    emitChange({ ...state, mode: 'vec3', [axis]: v ?? state[axis] });
   };
 
   return (
@@ -124,12 +124,10 @@ export function PositionEditor({ label, state, onChange }: PositionEditorProps)
           {(['x', 'y', 'z'] as const).map((axis) => (
             <div key={axis}>
               <Label className='text-xs text-muted-foreground uppercase'>{axis}</Label>
-              <Input
+              <NumericInput
                 className='h-8 text-sm font-mono'
-                type='number'
-                step='0.1'
                 value={state[axis]}
-                onChange={(e) => handleAxis(axis, e.target.value)}
+                onChange={(v) => handleAxis(axis, v)}
                 title={`${label} ${axis.toUpperCase()}`}
               />
             </div>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@molstar/molstar-components",`
`3`		`- "version": "0.6.0-experimental.17",`
	`3`	`+ "version": "0.6.0-experimental.18",`
`4`	`4`	`"license": "MIT",`
`5`	`5`	`"exports": {`
`6`	`6`	`".": "./src/mod.ts",`