<!-- source-hash: 15661112c92005589b12ee519cb59bec -->
This file contains Storybook stories for the `ScriptArguments` component, providing comprehensive visual documentation and testing scenarios for a key-value pair input interface used for managing script arguments.

## Key Components

- **Default Configuration**: Meta object defining component documentation, controls, and layout
- **Story Variants**: 10 different scenarios covering empty state, single/multiple arguments, flags, disabled state, and custom configurations
- **Interactive Story**: Live example with state management demonstrating real component behavior
- **Visual Testing**: Stories for edge cases like long values, many arguments, and custom placeholders

## Usage Example

```typescript
import { ScriptArguments } from './ScriptArguments.stories'

// Basic usage in Storybook
export const MyStory: Story = {
  args: {
    arguments: [
      { id: '1', key: 'port', value: '3000' },
      { id: '2', key: 'verbose', value: '' }
    ],
    titleLabel: 'Script Arguments',
    disabled: false
  }
}

// Interactive story with state
const [args, setArgs] = useState<ScriptArgument[]>([])
return (
  <ScriptArguments 
    arguments={args} 
    onArgumentsChange={setArgs}
    titleLabel="Script Arguments"
  />
)
```

The stories demonstrate various use cases including command-line flags (empty values), configuration parameters, and disabled states, making it easy for developers to understand and test the component's behavior across different scenarios.