Function NodeConfigPanel

yaml-flow-editor/src/components/NodeConfigPanel.tsx:118–579

({
  node,
  onChange,
  onDelete,
}: NodeConfigPanelProps)

}

export default function NodeConfigPanel({
  node,
  onChange,
  onDelete,
}: NodeConfigPanelProps) {
  const config = NODE_CONFIGS[node.data.nodeType as NodeType];
  const isProtected = node.type === 'start' || node.type === 'end';

  /** Typed accessor for node data fields. */
  const d = node.data as Record<string, unknown>;

  const handleChange = (field: string, value: unknown) => {
    onChange(node.id, { [field]: value } as Partial<FlowNodeData>);
  };

  const renderField = (
    label: string,
    field: string,
    type: 'text' | 'textarea' | 'number' = 'text',
    placeholder?: string
  ) => {
    const value = d[field] ?? '';

    if (type === 'textarea') {
      return (
        <div className="mb-4">
          <label className="block text-xs font-medium text-gray-600 mb-1">
            {label}
          </label>
          <textarea
            value={String(value)}
            onChange={(e) => handleChange(field, e.target.value)}
            placeholder={placeholder}
            className="w-full px-3 py-2 border border-gray-200 rounded-md text-sm resize-y min-h-[80px] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
        </div>
      );
    }

    return (
      <div className="mb-4">
        <label className="block text-xs font-medium text-gray-600 mb-1">
          {label}
        </label>
        <input
          type={type}
          value={type === 'number' ? Number(value) || 0 : String(value)}
          onChange={(e) =>
            handleChange(
              field,
              type === 'number' ? Number(e.target.value) : e.target.value
            )
          }
          placeholder={placeholder}
          className="w-full px-3 py-2 border border-gray-200 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        />
      </div>
    );