+
+
+
+ updateVariable(variable.id, 'name', e.target.value)}
+ placeholder="Variable name"
+ className="flex-1"
+ disabled={isRunning}
+ />
+
+ {variables.length > 1 && (
+
+ )}
+
+
+ {/* Array configuration - only show when type is 'array' */}
+ {variable.type === 'array' && (
+
+ Array of:
+
+
+ Size:
+ {
+ const inputValue = e.target.value;
+ // Update the local input state immediately for responsive UI
+ setArraySizeInputs(prev => ({
+ ...prev,
+ [variable.id]: inputValue
+ }));
+
+ const size = parseInt(inputValue);
+ const isValid = !isNaN(size) && size >= 1;
+ setArraySizeErrors(prev => ({
+ ...prev,
+ [variable.id]: !isValid
+ }));
+
+ if (isValid) {
+ updateVariable(variable.id, 'arraySize', size);
+ }
+ }}
+ onBlur={(e) => {
+ const inputValue = e.target.value;
+ const size = parseInt(inputValue);
+ const isValid = !isNaN(size) && size >= 1;
+ if (!isValid) {
+ // Reset to minimum value if empty or invalid
+ const newSize = 1;
+ updateVariable(variable.id, 'arraySize', newSize);
+ setArraySizeInputs(prev => ({
+ ...prev,
+ [variable.id]: newSize.toString()
+ }));
+ setArraySizeErrors(prev => ({
+ ...prev,
+ [variable.id]: false
+ }));
+ } else {
+ // Clear local input state if valid
+ setArraySizeInputs(prev => {
+ const newState = { ...prev };
+ delete newState[variable.id];
+ return newState;
+ });
+ setArraySizeErrors(prev => ({
+ ...prev,
+ [variable.id]: false
+ }));
+ }
+ }}
+ placeholder="Size"
+ className={`w-20 ${arraySizeErrors[variable.id] ? 'border-destructive focus-visible:ring-destructive' : ''}`}
+ disabled={isRunning}
+ min="1"
+ />
+ {arraySizeErrors[variable.id] && (
+ Enter > 0
+ )}
+
+ )}
+
+
+
+ 
+